Czy możemy mieć wiele w tym samym?

Tak. Z DTD

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

Więc oczekuje jednego lub więcej. Następnie mówi

Użyj wielu sekcji tbody, gdy reguły są potrzebne między grupami tabeli rzędy.

Według tego przykładu można to zrobić: w3-struct-tables.

Problem Martina Joinera jest spowodowany niezrozumieniem znacznika <caption>.

Znacznik <caption> definiuje podpis tabeli.

Znacznik <caption> musi być pierwszym potomkiem znacznika <table>.

Możesz podać tylko jeden podpis w tabeli.

Należy również pamiętać, że atrybut scope powinien być umieszczony na elemencie <th>, a nie na elemencie <tr>.

Prawidłowym sposobem napisania tabeli multi-header multi-tbody byłoby coś takiego:

<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>Fish</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Chips</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Peas</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Gravy</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Pizza</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Salad</td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Oil</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Bread</td>
        </tr>
    </tbody>
</table>

Tak. Używam ich do dynamicznego ukrywania / odsłaniania odpowiedniej części tabeli, np. kursu. A mianowicie

<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>

Przycisk może być dostarczony, aby przełączać się między wszystkim lub tylko bieżącym dniem, manipulując tbodies bez przetwarzania wielu wierszy pojedynczo.

Ponadto, jeśli uruchomisz dokument HTML z wieloma znacznikami <tbody> za pomocą walidatora HTML W3C z DOCTYPE HTML5, zostanie on pomyślnie zweryfikowany.

EDIT: znacznik caption należy do tabeli i dlatego powinien istnieć tylko raz. Nie należy kojarzyć caption Z Każdym tbody elementem tak jak ja:

<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>

ZŁY PRZYKŁAD POWYŻEJ: NIE KOPIUJ

Powyższy przykład nie renderuje się tak, jak można się spodziewać, ponieważ pisanie w ten sposób wskazuje na nieporozumienie znacznika caption. Potrzebowałbyś wielu hacków CSS, aby renderował poprawnie, ponieważ działałbyś wbrew standardom.

Szukałem standardów W3Cs na znaczniku caption, ale nie można znaleźć jednoznacznej reguły, która mówi, że musi być tylko jeden element caption w tabeli, ale tak jest w rzeczywistości.

Utworzyłem JSFiddle Gdzie mam dwa zagnieżdżone ng-repeats z tabelami, a rodzic ng-repeat na tbody. Jeśli sprawdzisz dowolny wiersz w tabeli, zobaczysz, że jest sześć elementów tbody, tj. poziom nadrzędny.

HTML

<div>
        <table class="table table-hover table-condensed table-striped">
            <thead>
                <tr>
                    <th>Store ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Cost</th>
                    <th>Sales</th>
                    <th>Revenue</th>
                    <th>Employees</th>
                    <th>Employees H-sum</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="storedata in storeDataModel.storedata">
                <tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
                    <td>{{storedata.store.storeId}}</td>
                    <td>{{storedata.store.storeName}}</td>
                    <td>{{storedata.store.storeAddress}}</td>
                    <td>{{storedata.store.storeCity}}</td>
                    <td>{{storedata.data.costTotal}}</td>
                    <td>{{storedata.data.salesTotal}}</td>
                    <td>{{storedata.data.revenueTotal}}</td>
                    <td>{{storedata.data.averageEmployees}}</td>
                    <td>{{storedata.data.averageEmployeesHours}}</td>
                </tr>
                <tr data-ng-show="dayDataCollapse[$index]">
                    <td colspan="2">&nbsp;</td>
                    <td colspan="7">
                        <div>
                            <div class="pull-right">
                                <table class="table table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date [YYYY-MM-dd]</th>
                                            <th>Cost</th>
                                            <th>Sales</th>
                                            <th>Revenue</th>
                                            <th>Employees</th>
                                            <th>Employees H-sum</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
                                            <td class="pullright">
                                                <button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
                                                </button>
                                            </td>
                                            <td>{{dayData.date}}</td>
                                            <td>{{dayData.cost}}</td>
                                            <td>{{dayData.sales}}</td>
                                            <td>{{dayData.revenue}}</td>
                                            <td>{{dayData.employees}}</td>
                                            <td>{{dayData.employeesHoursSum}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

( Nuta boczna: To wypełnia DOM, jeśli masz dużo danych na obu poziomach, więc pracuję nad dyrektywą, aby pobrać dane i zastąpić, tj. dodając do DOM po kliknięciu rodzica i usuwając, gdy inny jest kliknięty lub sam znowu rodzic. Aby uzyskać takie zachowanie, które znajdziesz na Prisjakt.nu , Jeśli przewiń w dół do wymienionych komputerów i kliknij wiersz (Nie linki). Jeśli to zrobisz i sprawdzisz elementy, zobaczysz, że tr jest dodawany, a następnie usuwany, jeśli rodzic zostanie ponownie kliknięty. )