如何在datatables中设置某些列的列宽

Question

如何在datatables中设置某些列的列宽

10

这是我的数据表。我似乎无法控制任何列的宽度：

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

我在这里尝试了各种方法：这里

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

还有这里：

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

求助无果。有没有人能告诉我如何手动控制某些单独列的宽度？我希望可以使用datatables中的现有方法来实现。

注意：如果有机会我将发布一个fiddle。 fiddle在这里-虽然不完全相同，但如果我的理解正确，我应该可以在这里控制列宽：

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

- HattrickNZ

5个回答

1

something like

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

对我有用，您可以通过逗号分隔的规则指定列。

- Harry Moreno

0

$(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进行相同操作

- Malkeet Singh

谢谢，我能够将列宽缩小到173像素，方法是在这里设置宽度为10：columnDefs: [ { width: 10, targets: 0 }, { width: 10, targets: 1 }, { width:10, targets: 2 } ], 如果我将宽度设置为500，可以看到增加这里。同时，targets: 0指的是第一列...等等。 - HattrickNZ

0

如果您有一个类似这样的表格，您可以使用 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>

给列添加内联样式非常有效。如果你在开发者工具中观察，你会发现datatable分配了宽度内联样式，所以你使用CSS文件应用任何样式都会被覆盖。给列添加内联CSS对我来说效果很好。希望这对你有帮助。

- Koushik Das

0

由于我的表格有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" 为 false：此选项禁用自动列宽计算，并使用 columnDefs 选项手动设置宽度。

- CSJ

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

我的经验是，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/