Question

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

以下代码显示了de 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

我解决问题只在th宽度固定宽度上添加div。

在表格定义中，我在问题上显示了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>

当前的Datatable配置是：

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

Answer 2

set autoWidth：false;
将px值设置为前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
    ]
});

Specifying a fixed column width in jQuery Datatables

Answer 3

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

aoColumns：[ {＆＃34; sClass＆＃34;：＆＃34; my_class＆＃34; }]

在你的CSS中：

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

修复了数据表中的列宽

3 个答案: