CSS: borders between table columns only

Question

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

Answer 1

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

Answer 2

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;
}

Answer 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

Answer 4

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:

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

.lastCell {
    border-right: none;
}

Answer 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:

1. Set a class on the last td of 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