固定数据表的列宽

Question

在用户执行某些操作之前，我有一个空表。 问题在于，当表为空时，该列具有一个宽度，而当表具有内容（ td上的某些输入）时，宽度会变化。 我想要的是保持列大小固定，即表为空且包含内容时的列大小相同。

以下代码显示了Datatable的配置。 所示的宽度是我需要的宽度，例如，当表为空时，第一列的width为114px

tabla = $('#tabla').DataTable({
    language: {
        url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
    },          
    "bSort": false,
    "bAutoWidth": false,
     aoColumns : [
      { "sWidth": "104px"},
      { "sWidth": "263px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "105px"},
      { "sWidth": "33px"},
    ]
}); 

Answer 1

我解决了这个问题只是关于添加的div th宽度固定的宽度。

在表定义中，我将这个HTML和Datatable配置显示在问题上：

<thead>
    <tr>                            
        <th>Code</th>
    </tr>
    <tr>                            
        <th>Description</th>
    </tr>
</thead>

我现在所做的是在HTML上添加div：

<thead>
    <tr>                            
        <th><div style="width: 100px;">Codigo</div></th>
    </tr>
    <tr>                            
        <th><div style="width: 300px;">Description</div></th>
    </tr>
</thead>

当前的数据表配置为：

tabla = $('#tabla').DataTable({
    language: {
        url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
    },          
    "bSort": false
});

Answer 2

1. 设置autoWidth：false;
2. 将px值设置为前3列； 重要：检查表格宽度是否大于3列+最后一列；

3. 调整表格宽度和第4列。

    $('#example').DataTable({ //four column table autoWidth: false, //step 1 columnDefs: [ { width: '300px', targets: 0 }, //step 2, column 1 out of 4 { width: '300px', targets: 1 }, //step 2, column 2 out of 4 { width: '300px', targets: 2 } //step 2, column 3 out of 4 ] }); 

在jQuery Datatables中指定固定的列宽

Answer 3

您可以像这样为您的列定义CSS类：

aoColumns：[{“ sClass”：“ my_class”}]

在您的CSS中：

.my_class 
{
    overflow:hidden;
    width:200px;
}