javascript - 数据表的响应问题，列的大小比正常值大

Question

我正在使用数据表，并遇到了数据表对列大小的响应性问题。当数据表定义了列的大小时，即更大并且表的最后一列不显示。所以我尝试添加一个带有 max-width 的 CSS 类，但它不起作用。

HTML:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<table class = "display" id = "datatable"></table>

CSS:

.cell_table {
  max-width: 250px;
}

JS:

$('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    "columnDefs" : [{
        "targets": "_all",
        "createdCell" : function (td, cellData, rowData, row, col) {
            $(td).attr('id', 'cell-' + col);
        },
    }, {
        "targets" : [0, 1, 2, 3],
        "className" : "text_center cell_table",
    }],
    "lengthMenu" : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
    "iDisplayLength" : -1,
    data : data_use,
    columns : column_name,
    dom : 'lfrtip',
    responsive : true,
    destroy : true,
    searching: true,
});

Here你可以在 JSfiddle 上找到代码。

Answer 1

你做错了什么，设置了两次显然不正确的 className。

Fiddle

$('#datatable').DataTable({
            "sPaginationType" : "full_numbers",
            "columnDefs" : [{
                "targets": "_all",
                "createdCell" : function (td, cellData, rowData, row, col) {
                    $(td).attr('id', 'cell-' + col);
                },
            }, {
                "targets" : [0, 1, 2, 3],
                "className" : "text_center cell_table",
            }],
            "lengthMenu" : [[5, 10, 25, -1], [5, 10, 25, "All"]],
            "iDisplayLength" : 25,
            data : data_use,
            columns : column_name,
            dom : 'lfrtip',
            responsive : true,
            destroy : true,
            searching: true,
});

CSS:

.text_center{ 
    text-align : center;
}

.cell_table {
    max-width : 250px;
}

.dataTable{
  width:100%;
  max-width:100%;
}