数据表内容可编辑问题导致滚动X

Question

我对内容可编辑有问题。

当我在列上使用内容可编辑并且启用 scrollX 选项时，列未对齐。看看我的截图错位

我在stackoverflow上尝试了许多解决方案，但没有成功。

但是，这是我的数据表设置：

table = $('#sparepart_id').DataTable({
"paging": true,
"stateSave": true,
"pagingType": "full_numbers",
"lengthChange": false,
"searching": false,
"ordering": true,
"info": false,
"autoWidth": false,
"pageLength": 12,
scrollX: true,
"initComplete": function (settings, json) {  
$("#sparepart_id").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
},
stateLoadCallback: function (settings) {
var o;
$.ajax( {
url     : BASE_URL+"spareparts/load_layout",
type    : "POST",
data    : { module_table : "sparepart-list"},
async   : false,
dataType: 'json',
success: function (json) {
o = JSON.parse(json.json);
},
error:function(data){
console.log(data);
}
} );
return o;
}

在我的 HTML 代码中，我把

<td contenteditable="true"></td>

Answer 1

不必将其标记为解决方案，也不必投票。 这个问题的作者找到了这个答案。我列出这个，以保留SO中遵循的问答模式

.class{
word-break: break-all !important;
cursor: text;
white-space: pre-wrap !important;
}