删除表格中两个 td 元素之间的空格答案

【问题标题】：remove space between two td elements in a table删除表格中两个 td 元素之间的空格
【发布时间】：2017-04-13 19:57:00
【问题描述】：

我有一张 tr & 2 tds 的桌子。 2 td 有桌子。两个内表之间有空间，这是我不想要的。有人可以建议我如何删除这个间距。这是我的标记：

 <table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
    <tr>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
                <tr>
                    <td>Subscriber Name: </td>
                    <td>
                        <input type="text" id="Text1" /></td>
                </tr>
                <tr>
                    <td>Subscriber Id: </td>
                    <td>
                        <input type="text" id="Text2" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button1" /></td>
                </tr>
            </table>
        </td>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
                <tr>
                    <td>Admin Name: </td>
                    <td>
                        <input type="text" id="Text3" /></td>
                </tr>
                <tr>
                    <td>Admin Id:</td>
                    <td>
                        <input type="text" id="Text4" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button2" /></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

您需要将单元格本身的内边距设置为 0。它们不继承表格元素的内边距。

<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
    <td style="padding-right: 0px;">
        <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
            <tr>
                <td>Subscriber Name: </td>
                <td>
                    <input type="text" id="Text1" /></td>
            </tr>
            <tr>
                <td>Subscriber Id: </td>
                <td>
                    <input type="text" id="Text2" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" id="Button1" /></td>
            </tr>
        </table>
    </td>
    <td style="padding-left: 0px;">
        <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
            <tr>
                <td>Admin Name: </td>
                <td>
                    <input type="text" id="Text3" /></td>
            </tr>
            <tr>
                <td>Admin Id:</td>
                <td>
                    <input type="text" id="Text4" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" id="Button2" /></td>
            </tr>
        </table>
    </td>
</tr>

【讨论】：

你添加了 style="padding-left: 0px;"对于外部表的 td 元素，我认为我不需要这样做，因为我有 padding: 0;在表本身。但是，看到您的答案，我尝试了它并成功了。谢谢

【解决方案2】：

你可以简单的使用：

table {
    border-collapse: collapse;
}

table{
    border-collapse: collapse;
}

<table>
    <tr>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
                <tr>
                    <td>Subscriber Name: </td>
                    <td>
                        <input type="text" id="Text1" /></td>
                </tr>
                <tr>
                    <td>Subscriber Id: </td>
                    <td>
                        <input type="text" id="Text2" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button1" /></td>
                </tr>
            </table>
        </td>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
                <tr>
                    <td>Admin Name: </td>
                    <td>
                        <input type="text" id="Text3" /></td>
                </tr>
                <tr>
                    <td>Admin Id:</td>
                    <td>
                        <input type="text" id="Text4" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button2" /></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【讨论】：

通过使用border-collapse，我失去了圆形边框，我不知道为什么。事实上，我的表格位于一个 div 中，其中所有表格都设置了边框折叠，所以我用边框折叠：初始来覆盖它以获得圆形边框

【解决方案3】：

在table 标签中包含cellpadding="0" cellspacing="0"

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
</table>

Fiddle Demo

【讨论】：

cellspacing 和 cellpadding 在 html5 中已过时。
cellpadding="0" cellspacing="0" 在表格标签中是废弃的，但是我对 style="border-spacing: 0; border-width: 0; padding: 0; 做同样的事情。边框宽度：0；"
@Alex 检查这个stackoverflow.com/questions/2414773/…，即使它已经过时，我们也可以使用..
@RasmitaDash，否则我们可以更新“table {border-collapse: collapse;} td {padding: 0px;}”
我知道我们可以使用它，但它已经过时了 :) 顺便说一句，我没有投反对票。