Равное расстояние между столбцами и границами таблицы

Question

У меня есть внешняя таблица с тремя столбцами. Каждая ячейка содержит внутреннюю таблицу. Внешняя таблица и внутренние таблицы имеют границы.

Мне нужно одинаковое количество горизонтального пространства между левой границей внешней таблицы и первой внутренней таблицей, между каждой внутренней таблицей и следующей, а также между последней внутренней таблицей и правой границей внешней таблицы.

Какой чистый способ сделать это? Я пытался сделать это, определив правила CSS для первой, второй и третьей ячеек в каждой строке внешней таблицы, например:

  table.outer tr td:nth-of-type(1) {
     text-align:center; vertical-align:top;
     padding-left:3mm; padding-right:1.5mm;
  }
  table.outer tr td:nth-of-type(2) {
     text-align:center; vertical-align:top;
     padding-left:1.5mm; padding-right:1.5mm;
  }
  table.outer tr td:nth-of-type(3) {
     text-align:center; vertical-align:top;
     padding-left:1.5mm; padding-right:3mm;
  }

Такой подход создает кошмары. Во-первых, IE 8 не поддерживает селектор n-го типа. Во-вторых, в браузерах, которые поддерживают его, первая, вторая и третья ячейки внутренней таблицы наследуют свойства заполнения от внешней таблицы, и когда я пытаюсь их переопределить, горизонтальный интервал внутренних таблиц полностью выходит из строя. Я не могу понять, что происходит, и тем более, почему. Лучше найти другой подход, чем продолжать пытаться заставить этот работать!

Answer 1

Добавьте cellpadding="0" и любое желаемое значение для пространства ячеек внешней таблицы и сделайте внутреннюю ширину таблиц = "100%".

Html:

<table class="outer" cellspacing="10" cellpadding="0">
    <tr><td><table class="inner"><tr><td>bbb</td></tr></table></td>
        <td><table class="inner"><tr><td>bbb</td></tr></table></td>
        <td><table class="inner"><tr><td>bbb</td></tr></table></td>
    </tr>
    <tr><td><table class="inner"><tr><td>a</td></tr></table></td>
        <td><table class="inner"><tr><td>a</td></tr></table></td>
        <td><table class="inner"><tr><td>a</td></tr></table></td>
    </tr>
</table> 

Css:

.outer
{ 
    border: 1px solid black;
}
.inner
{ 
    border: 1px solid black;
    width: 100%;
}

Рабочая демонстрация: http://jsfiddle.net/er144/qEcgw/

Answer 2

Я решил проблему, заменив селекторы n-го типа отдельными классами для ячеек в левом, центральном и правом столбцах, а также для верхнего, среднего и нижнего рядов:

   table.outer tr td        { text-align:center; vertical-align:top; }
   table.outer tr td.top    { padding-top:2mm; padding-bottom:1mm; }
   table.outer tr td.middle { padding-top:1mm; padding-bottom:1mm; }
   table.outer tr td.bottom { padding-top:1mm; padding-bottom:2mm; }
   table.outer tr td.left   { padding-left:3mm; padding-right:2mm; }
   table.outer tr td.center { padding-left:2mm; padding-right:2mm; }
   table.outer tr td.right  { padding-left:2mm; padding-right:3mm; }

Затем я использовал пару классов для стилизации каждой ячейки: верхний левый - class="left top", следующий - class="center top" и т. Д.

Я не думаю, что это самое элегантное решение, но оно работает.

Я все еще заинтересован в предложениях о более изящных способах сделать это - в следующий раз - но я не могу позволить себе уделять этому много времени сейчас, когда он работает.