CSS：仅限于表格列之间的边界

有没有一种方法，使用CSS来显示仅在列之间的表中的边界（而不是在外边缘）？

Answer 1

不是没有棘手的CSSselect器和额外的标记等。

像这样的东西可以做（使用CSSselect器）：

table { border:none; border-collapse: collapse; } table td { border-left: 1px solid #000; border-right: 1px solid #000; } table td:first-child { border-left: none; } table td:last-child { border-right: none; } 

编辑

为了澄清@ jeroen的评论打击，你真正需要的是：

 table { border: none; border-collapse: collapse; } table td { border-left: 1px solid #000; } table td:first-child { border-left: none; } 

Answer 2

我知道这是一个古老的问题，但有一个简单的， 一个线路的解决scheme ，一贯为Chrome，Firefox等，以及IE8和以上（并在大多数情况下，在IE7的作品也见 – http： //www.quirksmode.org/css/selectors/了解详情）：

 table td + td { border-left:2px solid red; } 

输出是这样的：

 Col1 | Col2 | Col3 

使这项工作的是什么，你只是在与另一个表格单元格相邻的表格单元格上定义一个边框。 换句话说，您将CSS应用于除第一个以外的所有单元格。

通过对第二个孩子应用一个左边框到最后一个孩子，它给出了在这些单元之间的线的外观。

Answer 3

我可能正在简化这个问题，但没有td {border-right：1px solid red;}为你的表设置工作？

Answer 4

你需要在td上设置一个border-right ，然后定位一个行中的最后一个tds，将border设置为none 。 目标的方法：

1. 在每一行的最后一个td上设置一个类并使用它
2. 如果它是一组单元格，并且只针对较新的浏览器，则3个单元格宽可以使用td + td + td
3. 或者更好（用新的浏览器） td:last-child

Answer 5

桌上的边界总是有点片状。 一种可能性是为每个表格单元添加一个边界正确的声明，除了最右边一列的单元格外。 如果您使用任何types的表格间距，这将不会工作得很好。

另一个select是使用1px高的背景图像和边框，但只有在任何时候都可以保证每个单元格的宽度的情况下才能使用。

另一种可能是用colgroup / col进行实验。 这是我最后一次看到它，但可以改善后，相当可怕的支持跨浏览器： http ： //www.webmasterworld.com/forum83/6826.htm

Answer 6

我用这样的三个垂直边框分隔的样式表，它工作正常：

 #column-left { border-left: 1px solid #dddddd; } #column-center { /*no border needed/* } #column-right { border-right: 1px solid #dddddd; } 

左边的列在右边有一个边框，右边的列是左边的边框，中间的列已经被左边和右边的照顾了。

如果你的列在div / wrapper / table / etc里面，不要忘了添加额外的空间来容纳边框的宽度。

Answer 7

在<td>里面，使用style="border-left:1px solid #colour;"

Answer 8

有没有简单的方法来做到这一点，除了在每个tr的最后一个td上做class =“lastCell”之类的事情，然后像这样设置你的css：

 #table td { border-right: 5px solid red } .lastCell { border-right: none; }