Jquery Datatables多头问题

Question

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

在图片中，第一列（年份）应该比所有其他列宽得多。当有一个标题行时，这样可以正常工作，但是当有两个标题行时，我指定的宽度（使用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;
}

我在元素检查员中多次看到这些规则但忽略了它们，因为我认为它们不会引起麻烦。经过一个消除过程，我发现它们是罪魁祸首。