Jak utworzyć obramowanie wokół sekcji tbody/thead tabeli?

Question

Próbuję utworzyć stronę z danymi tabelarycznymi, które muszą pojawić się jako wiele tabel. Mam jednak do spełnienia dwa sprzeczne wymagania:

1. Każda tabela musi mieć wokół siebie obramowanie.
2. Szerokości kolumn dla każdej tabeli muszą być w stanie zmienić rozmiar na podstawie zawartości. Jednak szerokość kolumn musi być spójna dla wszystkich tabel. (tj. rozmiar kolumny jest oparty na największej komórce w tej kolumnie we wszystkich tabelach).

Aby obsłużyć drugie wymaganie, mam jedną tabelę najwyższego poziomu, która zawiera wiele sekcji thead i tbody. Osiąga to # 2 pięknie. Zasadniczo Stworzyłem wiele pseudo-tabel w większej tabeli nadrzędnej, pogrupowanych jako pojedynczy thead z towarzyszącym tbody:

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

Teraz jestem stara się zająć pierwszego wymogu. Każdy pseudo-stół musi mieć wokół siebie obramowanie, podając się za prawdziwy stół.

Znalazłem, ku mojemu przerażeniu, że IE 6/7 nie pozwala na dodawanie stylów obramowania wokół tagów thead/tbody, lub po prostu dodałbym styl graniczny górny/lewy/prawy do theadu i dolny/lewy/prawy styl granicy do tbody.

Tworzenie oryginalnych tabel i granic stylów dla tych prac, aby rozwiązać # 1, ale zrywa # 2.

Inną opcją jest użycie stylów pierwszorzędnego i ostatniego dziecka do utworzenia moich granic. Niestety nie jest to ani ładne, ani nie działa w IE 6/7.

Inną alternatywą, nad którą się zastanawiałem, jest utworzenie obramowania wokół całego stołu i próba utworzenia rzędu między pseudonodami, co tworzy moją separację, ale chociaż mogę utworzyć górne/dolne granice dla tego ok, mam jednak aby odkryć środek do usunięcia granicy lewej/prawej tabeli dla tego rzędu. Czy to jest możliwe?

Moja ostatnia alternatywa to tworzenie klas do rysowania lewej, prawej, górnej i dolnej granicy, ustawienie odpowiednich komórek tabeli do korzystania z tych klas. Wiem, że to ostatecznie zadziała, ale jest okropnie niezgrabne i powoduje naprawdę niechlujny znacznik. Grupy Colgroups nie mogą mnie tutaj uratować, ponieważ nie są w stanie obsługiwać stylów obramowania. To niefortunne, ponieważ mogłoby to nieco ułatwić żołądek.

Czy istnieje lepsza metoda na wykonanie granic, które mogłem ominąć?

Answer 1

<table rules="groups"> użycie lub podobne wartości dla rules

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

Answer 2

Go ze sposobu tworzenia oryginalnych tabel, a następnie spróbuj tego.

Po prostu pójdę z tworzeniem oddzielnych tabel.Załóżmy, że każda tabela wygląda następująco:

<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> 

Następnie użyj jQuery ustawić szerokość:

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"}); 
}); 

Wszystko co musisz zrobić, to dołączyć plik JavaScript jQuery (dostępny od jquery.com) w tagu głowy:

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