CSS：仅限表列之间的边界

Question

有没有办法，使用CSS，只在列之间的表格中显示边框（而不是在外边缘）？

Answer 1

修改2

伊拉斯谟有一个更好的单行below

---

并非没有棘手的CSS选择器和额外的标记等。

这样的事情可能会（使用CSS选择器）：

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

我知道这是一个老问题，但有一个简单的 单行解决方案 ，它可以一致地用于Chrome，Firefox等，以及IE8和以上（并且，大多数情况下，也适用于IE7 - 有关详细信息，请参阅http://www.quirksmode.org/css/selectors/）：

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

输出是这样的：

Col1 | Col2 | Col3

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

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

Answer 3

桌子上的边框总是有点不稳定。一种可能性是向每个表格单元格添加一个右边的声明，除了最右边的列。如果你使用任何类型的表间距，这将不会很好。

另一种选择是使用带有边框的1px高背景图像，但只有在可以始终保证每个单元格的宽度时才能使用。

另一种可能性是使用colgroup / col进行实验。上次我看到它时，这对跨浏览器提供了相当可怕的支持，但从那以后可能有所改进：http://www.webmasterworld.com/forum83/6826.htm

Answer 4

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

Answer 5

你需要在td上设置一个border-right，然后连续定位最后一个tds，将边界设置为none。目标方式：

1. 在每行的最后td上设置一个类并使用
2. 如果是设定数量的单元格且仅针对较新的浏览器，那么3个单元格可以使用td + td + td
3. 或更好（使用新浏览器）td:last-child

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

请参阅表格rules属性 - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1

Answer 9

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

#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}

Answer 10

获取一个类名为column-bordered-table的表，然后将其添加到CSS之下。这也将与bootstrap表一起使用

.column-bordered-table thead td {
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}

.column-bordered-table td {
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}

.column-bordered-table tfoot tr {
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}

请参见下面的输出
N：B您必须根据需要添加表格标题backgorund颜色