CSS 和 HTML 表格 - 间距/填充/边框问题（不确定哪个）答案

【问题标题】：CSS and HTML table - spacing/padding/border issue (not sure which)CSS 和 HTML 表格 - 间距/填充/边框问题（不确定哪个）
【发布时间】：2013-06-27 15:56:03
【问题描述】：

我对此很陌生，我试图搜索一篇回答它的帖子，但我发现的每一个建议似乎都没有任何效果。

基本上我有一个 HTML 表格 - 2 行，第一行只有一个单元格（一个标题），第二行有 3 个单元格。我希望有一个细边框分隔第 2 行中的三个单元格

标题

1 | 2 | 3

这样。我基本上得到了它，但是 2 与左边的线齐平，我想要一些间距。

我试过了：

cellspacing:10px（在 td 标签中）
边框右填充：10px
边框间距：10px

似乎没有一个是我想要的......

我已经手动调整单元格的宽度，顶部是600px，下面三个是200px。

有什么想法吗？

【问题讨论】：

你能用现有代码设置 jsfiddle 吗？
为什么你（很可能）使用表格进行布局，而不是 CSS 中的 display: table 和 table-cell？

标签： html css padding css-tables spacing

【解决方案1】：

您可以使用选择器来选择文本对齐和绘制 td 边框。 http://jsfiddle.net/A85rn/

tr td {text-align:center;border-left:solid;border-right:solid;width:2em;}
tr td:first-of-type {text-align:left;border:none}
tr td:last-of-type {text-align:right;border:none;}

【讨论】：

【解决方案2】：

我假设标记像

<table class=foo>
    <tr><th colspan=3>Heading
    <tr><td>1<td>2<td>3
</table>

要设置边框，您可以在前两个td 元素上设置右边框。要设置边框和单元格内容之间的间距，请在 td 元素上设置水平填充；设置左右填充（对称）似乎很自然，但您可以根据需要进行调整。示例样式表：

.foo td { 
    padding: 0 0.3em;
    border-right: solid 1px;
}
.foo td:last-child {
    border-right: none;
}

jsfiddle

【讨论】：