Как мне смоделировать заголовки нескольких таблиц?

Question

Я пытаюсь создать таблицу CSS, в которой (для целей макета) заголовок вверху и внизу.

К сожалению, , насколько я могу судить , display: table-caption объединяет все в один пробел вверху. Это означает, что на самом деле отображается только заголовок заголовка.

Я попытался обработать их как строки вместо , но по какой-то причине их ширина соответствует ширине первого столбца таблицы. (Я что-то здесь не так делаю?) То же самое происходит, если я делаю их обычными div с шириной, равной 100%.

Есть ли другой, возможно, более элегантный способ иметь несколько заголовков таблиц? Я сделал какую-то глупую ошибку в моих попытках испортить макет?

Answer 1

Поскольку вы используете CSS для макета (это не табличные данные), то нет смысла использовать display:table-caption для нижнего колонтитула.Просто создайте обычный div, ширина которого равна таблице (или заполняет контейнер, который сжимает таблицу).

Edit : Вот обновленный пример: http://jsfiddle.net/fCTpR/1/