表格单元格不分开答案

【问题标题】：Table cells are not separated表格单元格不分开
【发布时间】：2018-01-11 19:19:33
【问题描述】：

我在 HTML 中创建了一个表格。当我查看页面时，我注意到单元格没有分开。我在 Google 上找不到任何解决方案。这就是它的样子：

这是我使用的代码：

<table style="margin-top:50px;border:2px solid red;border-collapse:collapse;">

    <tr>
    <td>test</td>
    <td>test</td>
    </tr>
    <tr>
        <td>test</td>
    <td>test</td>
</tr>
</table>

【问题讨论】：

分离是什么意思，如果删除border-collapse:collpase;会更加分离。

标签： html html-table cell

【解决方案1】：

将padding 和borders 添加到tr 和td 元素。

JSFiddle Demo

td {padding:10px; border-right:1px solid orange;}
tr { border-bottom:1px solid blue }

【讨论】：

【解决方案2】：

不知道这是不是你要找的：Padding in TD

td {
    padding: 20px;
}

【讨论】：