数据 Tables:How 来控制 table 的 <th> 宽度。我正在使用 Jquery -1.9.4 版本

Question

是否可以控制或设置添加到 table header 的宽度作为一行 css。我正在尝试从版本 1.9.4 的 dataTables-jquery 中检查它。但是找不到任何 solution.Due 添加宽度对齐受到干扰。

我也在 HTML 中分配宽度

<th width="20%">Bhairav</th>

但是当我检查控制台时，它看起来像

<th width="20%" class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="" style="width: 12px;">Bhairav</th>

问题是样式="width: 12px;" 不知从哪里动态添加到它。?

谁能帮我解决这个问题。

Answer 1

style="width: 12px;" 是 dataTables 在有 bAutoWidth: true 时添加的。示例：

dataTables 1.9.4 默认 bAutowidth (true) -> http://jsfiddle.net/rrsn0ckL/

首先<th>被渲染为

<th width="30%" class="sorting_asc" ...style="width: 254px;">Rendering engine</th>

与 bAutoWidth: false 相同 table -> http://jsfiddle.net/rrsn0ckL/1/

首先<th>被渲染为

<th width="30%" class="sorting_asc" ...>Rendering engine</th>

所以使用 bAutoWidth: false 来避免 style="width: 12px;"

通知：<th> width 属性是 HTML 4.01 特定的，不应再使用 -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

而是使用 CSS 或内联样式 style="width:20%;"。 CSS 示例：

table#example th:nth-child(1) {
    width: 20%;
}
table#example th:nth-child(2) {
    width: 20%;
}

等等

Data Tables:How to control the <th> width of table . I am Using Jquery -1.9.4 version