Question

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

看看这个：

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

输出是这样的：（here是一个小提琴）

+-----+ +----+
|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属性。它看起来更漂亮，更现代：

border-collapse属性设置表格边框是否为折叠为单个边框或分离为标准HTML。

table {
    border-collapse: collapse;
}

这是second JSFiddle demo。

Answer 2

在你的css中添加以下代码： -

table{
cellpadding:"0";
}

cellpadding属性指定单元格墙和单元格内容之间的空间（以像素为单位）。

For more reading

Answer 3

试试这个

table {
	border-collapse: collapse;
	border-spacing: 0; 
}
td{
    border: 1px solid;
}

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

如何在表中集成所有td单元格

3 个答案: