html - 如何整合表格中的所有 td 单元格

Question

如何删除所有 <td> 之间的空格在<table> ？

看看这个:

<table>
    <tr>
        <td> one
        </td>
        <td> two
        </td>
    </tr>
    <tr>
        <td>three
        </td>
        <td> four
        </td>
    </tr>
</table>

输出是这样的:(here 是一个 fiddle )

+-----+ +----+
|one  | |two |
+-----+ +----+
+-----+ +----+
|three| |four|
+-----+ +----+

我想要这个:

+-----+----+
|one  |two |
+-----+----+
+-----+----+
|three|four|
+-----+----+

换句话说，删除行元素之间的空间。可能吗？

Answer 1

方法 1.您可以使用表格的 cellspacing 和 cellpadding 属性:

<table cellspacing="0" cellpadding="0">
</table>

这是 JSFiddle demo .

方法 2. 使用 CSS border-collapse 属性。它看起来更漂亮，也更现代:

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

table {
    border-collapse: collapse;
}

这是 second JSFiddle demo .