CSS：仅表格列之间的边框

CSS: borders between table columns only

提问by dmr

Is there a way, using CSS, to show borders in a table between columns only (not on the outer edges)?

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

回答by rossipedia

Edit 2

编辑 2

Erasmus has a better one-liner below

伊拉斯谟在下面有一个更好的单线

---

---

Not without tricky css selectors and extra markup and the like.

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

Something like this might do (using CSS selectors):

这样的事情可能会做（使用 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;
}

Edit

编辑

To clarify @jeroen's comment blow, all you'd really need is:

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

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

回答by Erasmus

I know this is an old question, but there is a simple, one line solutionwhich works consistently for Chrome, Firefox, etc., as well as IE8 and above (and, for the most part, works on IE7 too - see http://www.quirksmode.org/css/selectors/for details):

我知道这是一个老问题，但有一个简单的单行解决方案，它始终适用于 Chrome、Firefox 等，以及 IE8 及更高版本（并且，在大多数情况下，也适用于 IE7 - 请参阅http: //www.quirksmode.org/css/selectors/详情）：

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

The output is something like this:

输出是这样的：

Col1 | Col2 | Col3

What is making this work is that you are defining a border only on table cells which are adjacent to another table cell. In other words, you're applying the CSS to all cells in a row except the first one.

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

By applying a left border to the second through the last child, it gives the appearance of the line being "between" the cells.

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

回答by hollsk

Borders on tables are always a bit flaky. One possibility would be to add a border-right declaration to each table cell except for the ones in right-most column. If you're using any kind of table-spacing this won't work very well.

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

Another option would be to use a 1px high background image with the borders inside it, but that'll only work if you can guarantee the width of each cell at all times.

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

Another possibility is to experiment with colgroup / col. This had fairly horrible support cross-browser the last time i looked at it but could have improved since then: http://www.webmasterworld.com/forum83/6826.htm

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

回答by DavidT

I may be simplifying the issue, but does td {border-right: 1px solid red;} work for your table setup?

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

回答by Mohideen bin Mohammed

Inside <td>, use style="border-left:1px solid #colour;"

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

回答by ScottS

You need to set a border-righton the td's then target the last tds in a row to set the border to none. Ways to target:

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

1. Set a class on the last tdof each row and use that
2. If it is a set number of cells and only targeting newer browers then 3 cells wide can use td + td + td
3. Or better (with new browsers) td:last-child

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

回答by wrongsort

I used this in a style sheet for three columns separated by vertical borders and it worked fine:

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

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

The column on the left gets a border on the right, the column on the right gets a border on the left and the the middle column is already taken care of by the left and right.

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

If your columns are inside a div/wrapper/table/etc... don't forget to add extra space to accomodate the width of the borders.

如果您的列在 div/wrapper/table/etc 内...不要忘记添加额外的空间来容纳边框的宽度。

回答by Ken Lin

See table's rulesattribute - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1

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

回答by SteveH

There's no easy way of doing this, other than doing something like class="lastCell" on the last td in each tr, and then setting your css up like this:

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

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

.lastCell {
    border-right: none;
}