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

Question

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

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

---

标题

1 | 2 | 3

---

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

我试过了：

cellspacing:10px（在 td 标签中）
border-right-padding:10px
border-spacing:10px

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

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

有任何想法吗？

Answer 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;}

Answer 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