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

有没有一种方法,使用CSS来显示仅在列之间的表中的边界(而不是在外边缘)?

不是没有棘手的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; } 

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

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

输出是这样的:

 Col1 | Col2 | Col3 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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