如何在数据表中设置某些列宽的列宽

Posted 2023-05-07

【中文标题】如何在数据表中设置某些列宽的列宽

【英文标题】：How do I set the column width of some column width in datatables

【发布时间】：2018-03-28 15:05:27

【问题描述】：

这是我的data table。

我似乎无法控制任何列的宽度：

$(document).ready(function() 
    $('#example').DataTable( 
        "ajax": 'ajax/data/arrays.txt'
     );

我尝试了各种方法here:

$('#example').dataTable( 
  "autoWidth": false
 );

还有here:

$('#example').dataTable( 
  "columnDefs": [
     "width": "20%", "targets": 0 
  ]
 );

没有成功。谁能告诉我如何手动控制某些列的宽度？我希望可以使用数据表中的现有方法来完成。

注意：如果有机会，我会发布一个小提琴。 fiddle here - 不完全一样，但如果我的理解是正确的，我应该可以在这里控制列宽：

var table = $('#example').DataTable();

【参考方案1】：

我的经验是columns.width 主要适用于相对意图，即“我希望此列相对较大”。每一列的宽度都会造成很多影响，即使你仔细地用精确的百分比来定位每一列，加起来等于 100，你最终也会感到沮丧。

如果您想要精确、精确的列宽定义，则无法绕过硬编码的 CSS：

table.dataTable th:nth-child(1) 
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;


table.dataTable td:nth-child(1) 
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;

http://jsfiddle.net/6eLg0n9z/

【讨论】：

tks，对于我的参考，你必须像这样table.dataTable th:nth-child(3) ... table.dataTable td:nth-child(3)here

处理每一列（th 和 td）

@HattrickNZ，如果<td> 比<th> 宽，您只需定位它们，反之亦然。我的意思是，您只需要制作必要的 CSS。

【参考方案2】：

类似

#table-foo td:nth-child(3),
#table-foo td:nth-child(4) 
  width: 5%;
  max-width: 5%;

为我工作，您通过逗号分隔的规则指定列

【参考方案3】：

如果您有一个这样的表并使用jquery datatable 定位，

<table class="table" cellSpacing="0" 
                               id="families-table">
       <thead>
            <tr>
                  <th>Name</th>
                  <th >Category</th>
                  <th><abbr title="Description">Des</abbr></th>
             </tr>
        </thead>
</table>

要控制一列的宽度，你可以添加这个

<table class="table" cellSpacing="0" 
                               id="families-table">
       <thead>
            <tr>
                  <th **style="width: 250px;"**>Name</th>
                  <th >Category</th>
                  <th><abbr title="Description">Des</abbr></th>
             </tr>
        </thead>
</table>

将inline style 添加到列中会很完美。如果您在dev tools 中注意到，您会看到datatable 内联分配width，因此您使用CSS 文件应用任何内容，它将被覆盖。将inline CSS 添加到列对我来说很好。 希望这会有所帮助。

【参考方案4】：

$(document).ready(function() 
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () 
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
     );

    // DataTable
    var table = $('#example').removeAttr('width').DataTable(
            scrollY:        "400px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        columnDefs: [
             width: 300, targets: 0 ,
             width: 100, targets: 0 ,
             width:100, targets: 0 
        ],
        fixedColumns: false);

    // Apply the search
    table.columns().every( function () 
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () 
            if ( that.search() !== this.value ) 
                that
                    .search( this.value )
                    .draw();
            
         );
     );
 );

您也可以参考http://jsfiddle.net/7bh7w2tu/10

【讨论】：

tks，我可以通过将宽度设置为 10 columnDefs: [ width: 10, targets: 0 , width: 10, targets: 1 , width:10, targets: 2 ], 将宽度设置为 500 here 可以看到最小的宽度为 173px，here . targets: 0 也指第一列...等