Как создать границы вокруг разделов tbody/thead таблицы?

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

Каждая таблица должна иметь границу вокруг нее.
Ширины столбцов для каждой таблицы должны иметь возможность изменять размер на основе содержимого. Однако ширина столбцов должна быть согласованной во всех таблицах. (т.е. размер столбца основан на наибольшей ячейке в этом столбце во всех таблицах).

Чтобы справиться со вторым требованием, у меня есть одна таблица верхнего уровня, которая содержит несколько разделов thead и tbody. Это прекрасно подходит для №2. По сути, я создал несколько псевдо-таблиц в более крупной родительской таблице, сгруппированной как единый тед с сопровождающим телом:

<table>
   <thead>
      table1 header content...
   </thead>
   <tbody>
      table1 body content...
   </tbody>
   <thead>
      table2 header content...
   </thead>
   <tbody>
      table2 body content...
   </tbody>
</table>

Теперь я пытаюсь решить первое требование. Каждая псевдо-таблица должна иметь границу вокруг нее, передавая себя как подлинную таблицу.

Я с тревогой обнаружил, что IE 6/7 не позволяет добавлять стили границ вокруг тегов ad/tbody, или я просто добавил бы стиль верхней/левой/правой рамки в thead и нижний/левый/right border style to tbody.

Создание настоящих таблиц и границ стилей для этих работ для решения # 1, но это ломается # 2.

Другой альтернативой было бы использование стилей первого и последнего детей для создания моих границ. К сожалению, это не красиво, и не работает в IE 6/7.

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

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

Есть ли лучший способ для выполнения границ, которые я, возможно, пропустил?

Ответ 1

используйте <table rules="groups"> или аналогичные значения для rules

см. http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Ответ 2

Перейдите к методу создания настоящих таблиц, затем попробуйте это.

Я бы просто начал создавать отдельные таблицы. Предположим, что каждая таблица выглядит так:

<table>
    <thead>
        <tr>
            <th class="column_1">Header 1</th>
            <th class="column_2">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        ...
    </tbody>
</table>

Затем используйте jQuery для установки ширины:

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready( function() {
    $(".column_1").each( function() {
        if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
    });
    $(".column_2").each( function() {
        if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
    });

    $(".column_1").css({width: columnOneWidth + "px"});
    $(".column_2").css({width: columnTwoWidth + "px"});
});

Все, что вам нужно сделать, это включить jQuery Javascript файл (доступный с jquery.com) в ваш заголовок:

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>