Question

If you make a normal table with 100% width and give the cells some borders the borders will of course go around all edges of all cells. But what if you want tables where the cells are shaded but the borders are “clear” (the same colour as the containing element of the table). In this case you probably want borders to appear on the internal edges of table cells but not on the outside edges.

If there is room on the right and left you can make the table have negative margins equal to the width of the cell borders. That will make the left side flush but at 100% width the right side won’t reach fully to the right. If you have 3px borders in this setup then the right side will be 6px short.

You can deal with this if you are using absolute widths for your tables but what if you need to use a % width?

Answer 1

A CSS way to do only internal 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 courtesy of Sass.)

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