CSS: borders between table columns only

Solution 1:

I know this is an old question, but there is a simple, one line solution which 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):

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.

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

Solution 2:

Edit 2

Erasmus has a better one-liner below

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

Something like this might do (using CSS selectors):

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:

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

Solution 3:

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.

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

Solution 4:

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

Solution 5:

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

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