数据表 - 3 个固定列，1 个响应式答案

【问题标题】：Datatables - 3 fixed columns, 1 responsive数据表 - 3 个固定列，1 个响应式
【发布时间】：2014-04-10 13:33:17
【问题描述】：

使用 jQuery DataTables，我得到了一个包含 4 列的简单表格。列 1 (ID)、3 (Who) 和 4 (Status) 是固定宽度，以 px 为单位。

    $('#tdt').dataTable( {
      "aaData" : tdl,
      "aoColumns" : [
        { "sTitle" : "ID" , "sWidth" : "60px"},
        { "sTitle" : "What"},
        { "sTitle" : "Who", "sWidth" : "80px" },
        { "sTitle" : "Status", "sWidth" : "150px" }
      ],
    });

我希望第 2 列填充容器的剩余宽度，并做出响应。因此，如果屏幕尺寸较小，则第 1、3 和 4 列保持其固定宽度，但第 2 列可以变薄以进行补偿。

现在，如果我没有为任何列设置宽度，dataTables 会做出响应，因为它会自动调整所有 4 列的宽度，并且（只要表格和容器的宽度为“100%”，那么整个事情都是响应式的。

http://datatables.net/release-datatables/examples/basic_init/flexible_width.html 演示。

一旦您为任何列设置了宽度，就不再是这种情况了。

请对此有任何想法/解决方案？谢谢

【问题讨论】：

如果没有任何示例或代码说明您的意思，很难得到一些想法:) 我的意思是，很难想象像“..这看起来很奇怪的句子作为 ID 列其中只有一个数字非常宽“:)
是否可以使用jsFiddle 之类的代码库来创建示例测试用例？
编辑希望能更好地解释。
所以我的研究表明这实际上是做不到的。要么您不设置任何列宽，在这种情况下整个表格都是响应式的，要么您设置了 1 个或更多，然后没有响应性。非常令人惊讶的是，这不是已经改变/解决的问题 - 不敢相信我是第一个遇到这种情况的人！
1 不要以 px 为单位设置宽度。请改用 % 等标准响应式单位。 2 参见例如stackoverflow.com/questions/22587810/… 3 如果您还没有找到答案，请在 DataTables forums 创建一个 runnable test case 4 公开问题

标签： javascript css datatable

【解决方案1】：

1 列固定，3 列共振...

"aoColumns": [
            { "mData": "No"},
            { "mData": "Type_Document" },
            { "mData": "Buy_From_Customer_No" },
            {
                mData: "Buy_From_Customer_Name",
                "bSearchable": true,
                "bSortable": true,
                mRender: function (data, type, row) {
                    return '<div style="width:200px;">' + data + '</div>';
                }
            },

【讨论】：