数据表标题宽度/对齐问题答案

【问题标题】：Data tables header width/alignment issue数据表标题宽度/对齐问题
【发布时间】：2013-03-20 14:58:06
【问题描述】：

我的数据表 jquery 插件出现问题，我的标题与表未正确对齐。我注意到，如果我将 cellspacing=0 添加到表格中，它将正确对齐。然而，这个属性在 HTML5 中是不应该的，如果可能的话，我希望它也能在 HTML5 中工作。如果您查看虚线边框线，则标题会与内容表线相匹配。

这是我用来创建表格的 javascript。

myTableHere = $('#MyTableHere').dataTable({
    'sScrollY': '100px',
    'bPaginate': false,
    'bScrollCollapse': true,
    'bFilter': false,
    'bInfo': false,
    'bSort': false,
    "aoColumns": [
        { "sWidth": "95px" },
        { "sWidth": "267px" },
        { "sWidth": "77px" },
        { "sWidth": "90px" },
        { "sWidth": "90px" },
        { "sWidth": "42px" }
    ]
});

这是在最新版本的 chrome 中查看的。

这是我整理数据之前的一些示例 HTML。 https://gist.github.com/anonymous/d44360d3a06c1a5b2898

编辑：我发现通过在标题表中添加边框折叠，它解决了这个问题。

【问题讨论】：

您能否添加一些表格的 HTML 示例（带有标题和一些实际行）？
HTML pre "datatabled" 或 post "datatabled"
pre -- 你从什么开始。
我相信我看到了表格主体的滚动条。我想知道这是否有影响。另外，为了方便滚动条，“标题”实际上是与表本身分开的表（无论是通过您的代码明确还是作为 API 的“自动”功能）？即使指定为像素值，列宽也总是会受到浏览器的调整，因此将表格放在一起并希望它们对齐是一种胡扯。
我发现通过在表头表中添加边框折叠，它解决了这个问题。

标签： jquery google-chrome datatables css

【解决方案1】：

在我使用数据表插件的表上，我应用了border-collapse: collapse; css 属性。在插件完成表格化我的表格后，此属性仍在应用于内容表格。但是，单独的标题表也没有应用此 css 属性。将标题表设置为边框折叠后，线条正确排列。

【讨论】：