jquery - Jquery Datatables 多标题问题

Question

当我将数据表设置为具有多个标题行时，已设置的 swidth 参数将被忽略。有没有办法告诉数据表标题应该是第二行而不是第一行？我搜索了 SO 和数据表 dot net docs，但找不到任何东西。

在图片中，第一列（年份）应该比其他所有列宽得多。当有一个标题行时，这工作得很好，但是当有两个标题行时，我指定的宽度（使用 swidth）被忽略。

Answer 1

这适用于 Safari、Firefox 和 Chrome：http: //jsfiddle.net/Zbn3j/

<table id=test>
    <thead>
        <tr><th colspan=4>Cars</th></tr>
        <tr><th>Year</th><th>Unit</th><th>Time</th><th>Status</th></tr>
    </thead>
    <tbody>
        <tr><td>r1,c1</td><td>r1,c2</td><td>r1,c3</td><td>r1,c4</td></tr>
        <tr><td>r2,c1</td><td>r2,c2</td><td>r2,c3</td><td>r2,c4</td></tr>
    </tbody>    
</table>

通过这个对 dataTable 的调用：

$('#test').dataTable(
    {
            "aoColumnDefs": [{ "sWidth": "200px", "aTargets": [ 0 ] }] 
    });

这与您的代码或经验有何不同？

Answer 2

我终于明白了这一点。我一直在使用 Foundation CSS（主要用于网格）并发现它正在将一些有问题的 CSS 规则应用于我的 TD 元素。

table tr td {
  padding: 0.5625em 0.625em;
}

我在元素检查器中多次看到这些规则，但忽略了它们，因为我认为它们不会造成麻烦。经过排除过程，我发现他们是罪魁祸首。