数据表：如何控制表的 <th> 宽度。我正在使用 Jquery -1.9.4 版本

【问题标题】：Data Tables:How to control the <th> width of table . I am Using Jquery -1.9.4 version数据表：如何控制表的 <th> 宽度。我正在使用 Jquery -1.9.4 版本
【发布时间】：2015-05-28 10:39:40
【问题描述】：

是否可以控制或设置添加到表头的宽度为一行 css。我正在尝试从 1.9.4 版的 dataTables-jquery 中检查它。但找不到任何解决方案。由于宽度的增加，对齐受到干扰。

我也在 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>

问题是 style="width: 12px;"是从哪里动态添加到它的。？

谁能帮我解决这个问题。

【问题讨论】：

尝试像<th style="width:20%;">Bhairav</th>一样分配它
或者更好的是，删除内联样式并将 CSS 放入样式表中。
@lee 我试过了，但问题还是一样。
@Prgmr 我没听懂你说什么？
@lee 现在当我在控制台中检查它时，它看起来像这样

标签： javascript jquery jquery-ui user-interface datatables

【解决方案1】：

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

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 相同的表 -> 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%;
}

等等

【讨论】：