Как сделать HTML-таблицу со 100% шириной и внутренними границами?

Question

Если вы создаете обычную таблицу со 100% шириной и даете ячейкам некоторые границы, то границы, конечно, будут проходить по всем краям всех ячеек. Но что делать, если вам нужны таблицы, в которых ячейки заштрихованы, но границы «четкие» (того же цвета, что и содержащий элемент таблицы). В этом случае вы, вероятно, захотите, чтобы границы появлялись на внутренних краях ячеек таблицы, а не на внешних.

Если справа и слева есть место, у таблицы могут быть отрицательные поля, равные ширине границ ячейки. Это сделает левую сторону заподлицо, но при ширине 100% правая сторона не достигнет полностью вправо. Если у вас есть 3px границы в этой настройке, то правая сторона будет 6px короткой.

Вы можете справиться с этим, если вы используете абсолютную ширину для своих таблиц, но что если вам нужно использовать% width?

Answer 1

CSS-способ сделать только внутренние границы таблицы, использующие селекторы CSS, которые должны быть доступны в 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 отступ от Sass .)

Обязательная jsFiddle ссылка: http://jsfiddle.net/inerdial/KzdUV/2/