How can you create an HTML table with 100% width and inner borders?

Question

If you make a regular table with 100% width and give the cells some borders, the borders, of course, will move along all the edges of all the cells. But what if you need tables in which cells are shaded, but the borders are "clear" (the same color as the containing table element). In this case, you probably want the borders to appear on the inner edges of the table cells, but not on the outer edges.

If there is space left and right, you can force the table to have negative margins equal to the width of the cell borders. This will make the left side flush, but at 100% width the right side will not reach all the way to the right. If there are 3px borders in this setting, then the right side will be 6px short.

You can handle this if you use absolute width for your tables, but what if you need to use% width?

Answer 1

The CSS way to do only the inner borders of a table that uses CSS selectors that should be available in IE7 :

table > tbody > tr > td { border-left: medium solid orange; border-top: medium solid orange; } table > tbody > tr > td:first-child { border-left: none; } table > tbody > tr:first-child > td { border-top: none; } table { border-spacing: 0; } 

(Wonky Indentation is kindly provided by Sass .)

Mandatory jsFiddle link: http://jsfiddle.net/inerdial/KzdUV/2/