html表格边框问题答案

【问题标题】：html table border issuehtml表格边框问题
【发布时间】：2013-03-06 23:57:19
【问题描述】：

我在其他一些 HTML 元素中有一个表格，它呈现得很奇怪 - 即使我在 css 中将它设置为折叠，边框空间也会出现。该表如下所示：

html 是这样的：

<table cellspacing="0" border="1" class="scrollable-headers-only" title="" cellpading="0">
        <thead title="">
            <tr title="">
                <th class="check" title=""></th>
                <th class="type" title=""></th>
                <th class="name" title="">Name</th>
                <th class="address center-column" title="">Address</th>
                <th class="domain" title="">Domain</th>
                <th class="status" title="">Status</th>
            </tr>
        </thead>
    </table>

而在 FireBug 中出现的 css 是这样的：

对于主表：
对于每一天：

我只添加了边框，也可以看到单元格之间的 s[aces。我的问题是消除那个空间。我在表格中添加了 cellpading 和 cellspacing = 0 ，但没有任何区别。我添加了 css 以消除该空间，而渲染没有任何变化。

这个表格用作另一个表格的标题，我需要将它的列与另一个表格对齐 - 正如您从图像中看到的那样，表格下方有一些小线条。我需要将此表与第二个表对齐，因为这个原因对于获得 100% 的精度很重要。

怎么了？谢谢。

【问题讨论】：

请在此处发布实际的 CSS，而不仅仅是图片。
JSFiddle replication 或类似的会更好！
@j08691: css 被分成几个文件（我使用 less.js 来构建它）。
太好了，把相关部分贴在这里。正如 James Donnelly 所提到的，一个 jsFiddle 示例很有帮助。
@ZelterAdy 你试过table td, table tr{padding: 0;} 吗？

标签： html css

【解决方案1】：

我将从删除 display: inline-block; 的 th 和 table 元素开始。 Firefox 将它们视为内联元素并插入额外的空间。另一种消除它的方法是为table 设置font-size: 0;，例如font-size: 12px; 为th 元素。

【讨论】：

我已经这样做了。这无济于事。 display : inline-block 需要在那里。
@Zelter Ady 1) 为什么它必须是内联块？这没有任何意义。 2）然后使用第二种解决方案 - font-size: 0.
@Zelter Ady Here' 工作示例：working example - 如果您删除表的 font-size:0，您会看到 inline-block 造成了问题。