CSS和HTML表-间距/填充/边框问题(不确定哪个)

Question

我对这件事很陌生，我试着寻找一个能回答这个问题的帖子，但我发现的每一个建议似乎都没有任何效果。

基本上，我在HTML-2行中有一个表，第一行只有一个单元格(一个标题)，第二行有3个单元格。我希望在第2行的三个单元格之间有一个细边框。

标题

1\x{e76f}2/3

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

我试过：

单元间距:10 td (在td标记中)

border-right-padding:10px

border-spacing:10px

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

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

有什么想法吗？

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

小提琴