CSS：仅表列之间的边框

75

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

css

— 数码单反相机
source

111

编辑2

伊拉斯mus（Erasmus）在下面有更好的单线

并非没有棘手的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; }

— 迷迭香
source

2

注意：IE6-8不支持:last-child（:first-child根据quirksmode.org/css/contents.html的要求

— 10年

7

只需使用左边框，则无需使用:last-child。

— jeroen

@jereon：是的，并不是一直都这么想。但是基本要点是相同的。

— rossipedia

我的评论主要针对斯科特，以应对他提出的问题；我完全同意您的回答的想法，就我而言，您甚至可以摆脱第一行：-) +1

— jeroen

将selectivizr用于ie8：last-child

— Neil

103

我知道这是一个古老的问题，但是有一个简单的单行解决方案可以在Chrome，Firefox等以及IE8及更高版本上始终如一地工作（并且大部分情况下也可以在IE7上工作-请参见http： //www.quirksmode.org/css/selectors/了解详情）：

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

输出是这样的：

Col1 | Col2 | Col3

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

通过将左边框应用到第二个到最后一个孩子，它使线条看起来像在单元格之间。

— 伊拉斯mus
source

2

这绝对值得一提，因为它仍然有效且非常简单

— ColdFrog

您将如何与HTML内联执行此操作？

— DAE

是的，这绝对是更好的解决方案👍–

— rossipedia

3

桌子上的边框总是有点片状。一种可能性是在每个表单元格中添加最右边的声明，最右边一列中的声明除外。如果您使用任何形式的表间距，则此方法将无法很好地工作。

另一种选择是使用内部带有边框的1px高背景图像，但这仅在您可以始终保证每个单元格的宽度的情况下才有效。

另一种可能性是尝试使用colgroup / col。上次查看此功能时，它对跨浏览器的支持相当糟糕，但此后可能会有所改善：http : //www.webmasterworld.com/forum83/6826.htm

— 霍尔斯克
source

这是一个非常糟糕的建议-CSS为相对较新的（IE8 +）提供了一种轻松实现此目标的简便方法。

— Maverick

请记住，这个答案（和问题）都来自十年前的2010年，当时IE6仍在许多开发人员的积极支持下。此外，几乎所有可用的HTML电子邮件渲染器都无法使用当时用于实现表格边框的CSS方法。不过，谢谢您的整理！

— hollsk 2014年

哈哈，没有意识到，因为接受的答案是在几周前才编辑的:)。

— Maverick

2

我可能是在简化问题，但是td {border-right：1px solid red;}是否可用于您的表格设置？

— 戴维
source

否，因为这样在表格的右边会有一个边框。我不希望在表格的右边缘或左边缘上有边框，仅在各列之间有边框。

— dmr

如果将一类应用于最后一列，则可以从最后一列中删除右边界声明。它确实需要手动调整，但是如果它是静态页面，则实际上是最佳解决方案。

— hollsk 2010年

2

您需要border-right在td上设置a ，然后定位行中最后一个tds以将边框设置为none。定位方式：

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

— 斯科特
source

2

我在样式表中使用了三列，这些列由垂直边框分隔，并且工作正常：

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

左边的列在右边有一个边框，右边的列在左边有一个边框，中间的列已经由左边和右边处理了。

如果您的列位于div / wrapper / table / etc等内部，请不要忘记添加额外的空间以适应边框的宽度。

— 错误排序
source

1

内部<td>使用style="border-left:1px solid #colour;"

— 莫希登·本·穆罕默德（Mohideen bin Mohammed）
source

1

我认为问题的实质是“使用CSS设置表格样式”，而不是将CSS放在特定位置。

— Rup

1

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

— 林健
source

0

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

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

.lastCell {
    border-right: none;
}

— 史蒂夫·H
source

0

取得一个具有类名的表，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颜色

— Soubhagya Kumar巴里克
source