datatables - 让表头单元格自动换行

Question

我正在使用datatables，并想知道是否有使表头换行的选项。

我使用紧凑显示。

问题在于，某些 JavaScript 将表头单元格的宽度设置为固定像素数。因此我想要：

fees
covered

name
shown


amount
shown

在标题中

编辑：添加<br/>标签的问题在于列的宽度保持不变，但我想让它们变得更小，宽度更小，请参见此处：

- Toskan

Answer 1

在表头中使用换行符<br>：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>fees<br>covered</th>
            <th>name<br>shown</th>
            <th>amount<br>shown</th>
        </tr>
    </thead>
</table>

请查看这个JSFiddle链接，其中包含代码和演示。

- Gyrocode.com

---

我在我的问题中添加了一个编辑。主要目标是使列变窄。但是，当添加br时，宽度保持完全相同，即在这种情况下为81px。您知道缩小em的方法吗？ - Toskan

@Toskan，请使用columns.width设置每个列的宽度。还可以参考autoWidth选项。 - Gyrocode.com

Answer 2

根据您的表格初始化方式，您可以在columns定义中使用title键的适应版本。

"title": "Your Title".split(" ").join("<br/>"), // Your<br/>Title

这里有一个JSFiddle示例。

- annoyingmouse

---

这基本上与@Gyrocode.com的答案相同。 - annoyingmouse