html表格边框问题

Question

我在其他一些 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% 的精度很重要。

怎么了？谢谢。

Answer 1

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