html – 仅在表格单元格之间设置空间

发布时间：2020-12-14 22:32:01 所属栏目：资源来源：网络整理

导读：在我的表中,我想仅设置单元格之间的空间,以便表格单元格和表格本身之间只有两个单元格之间没有间距.我的表格 HTML是2列2行,如下所示： table class="president-table" border="0" tbody tr td some text /td td img class="alignnone" src="images/lili-239x

在我的表中,我想仅设置单元格之间的空间,以便表格单元格和表格本身之间只有两个单元格之间没有间距.我的表格 HTML是2列2行,如下所示：

<table class="president-table" border="0">
    <tbody>
        <tr>
            <td>
                some text
            </td>
            <td>
                <img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <img src="images/kate-240x300.jpg" width="240" height="300" />
            </td>
        </tr>
    </tbody>
</table>

我使用了以下CSS：

.president-table{
    border-collapse: separate;
    border-spacing: 15px 0px;
}

该表应如下所示：

TABLE TOP

|TD TD|

|TD TD|

TABLE END

TD和TR之间仅在每两个TD之间没有空间.
建议？

解决方法

使用边界间距不可能实现所需的效果,因为这会在每个单元格周围增加空间,而不仅仅是在“内部”单元格之间.

细胞填充不起作用,因为它也在四个面上生长细胞.

如果你可以使用CSS3,那么你可以试试

table.test td:not(:last-child) { padding: 0 10px 0 0; }

如果你没有CSS3,那么除了每一行中的最后一个TD之外,你必须添加一个样式给单元格一个正确的填充(或者除了第一个带有左边距的填充).

注意：没有办法在单元格之外获取空间,因为表格会吞下边距(Cannot put margin on <td> tag with neither CSS nor cellspacing attribute)

Demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!