Datatable contenteditable问题导致scrollX

Posted 2023-05-07

【中文标题】Datatable contenteditable问题导致scrollX

【英文标题】：Datatable contenteditable problem cause scrollX

【发布时间】：2019-03-16 00:50:30

【问题描述】：

我对 contenteditable 有疑问。

当我在列上使用 contenteditable 并且启用 scrollX 选项时，列未对齐。看我截图misaligned

我在***上尝试了很多解决方案，但都没有成功。

但是，这是我的 dataTable 设置：

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>

【问题讨论】：

我认为问题在于lengthChange 和autoWidth 的值是假的。您还必须禁用 pageLength。

[ 已解决 ] 谢谢大家，我正在使用它` word-break: break-all !important;cursor: text;white-space: pre-wrap !important; `

酷！，回答你自己的问题，你会得到徽章

请添加您的修复作为答案，而不是作为评论？ .不要将标题更改为已解决。这可以帮助某人解决类似的问题

@Jeremy，请将答案发布在您的问题中，将其作为答案发布并自己接受，以便其他用户可以从中获得帮助。

【参考方案1】：

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

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