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

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

Answer 2

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

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

Take a table with class name column-bordered-table then add this below css.This will work with bootstrap table too

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

see the output below
N:B You have to add table header backgorund color as per you requirement