css 如何设置数据表中某个列宽的列宽

o8x7eapl  于 2023-03-14  发布在  其他
关注(0)|答案(5)|浏览(218)

这是我的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();
gzszwxb4

gzszwxb41#

我的经验是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;
}

**第一个e第一个f第一个x

ergxz8rk

ergxz8rk2#

比如

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

我的工作,您指定列的规则分隔逗号

s2j5cfk0

s2j5cfk03#

如果您有这样一个表,并且使用jquery datatable作为目标,

<table class="table" cellSpacing="0" width="100%"
                               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" width="100%"
                               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添加到列中对我来说工作得很好。希望这能有所帮助。

pgx2nnw8

pgx2nnw84#

$(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以获得相同的

xzabzqsa

xzabzqsa5#

由于我的表中有5列,我可以像这样定义每个列的宽度。

$('#example').DataTable({               
                "autoWidth": false,
                "columnDefs": [
                    { "width": "10%", "targets": 0 },
                    { "width": "10%", "targets": 1 },
                    { "width": "50%", "targets": 2 },
                    { "width": "10%", "targets": 3 },
                    { "width": "20%", "targets": 4 },
                ]
            });

保持“autoWidth”为假:此选项禁用自动列宽计算,并使用columnDefs选项手动设置宽度。

相关问题