Können wir mehrere <tbody> in derselben <table> haben?

Question

Können wir mehrere <tbody> Tags in derselben <table> ? Wenn ja, in welchen Szenarien sollten wir mehrere <tbody> Tags?

Answer 1

EDIT: Die caption Tag gehört zur Tabelle und sollte daher nur einmal vorhanden sein. Verknüpfen Sie nicht ein caption mit jedem tbody Element, wie ich es getan habe:

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

SCHLECHTES BEISPIEL OBEN: NICHT KOPIEREN

Das obige Beispiel wird nicht so wiedergegeben, wie man es erwarten würde, weil diese Schreibweise auf ein Missverständnis der caption Tag. Sie bräuchten eine Menge CSS-Hacks, um es korrekt darzustellen, weil Sie gegen die Standards verstoßen würden.

Ich habe nach W3C-Standards auf der caption Tag, konnte aber keine ausdrückliche Regel finden, die besagt, dass es nur eine caption Element pro Tabelle, aber das ist tatsächlich der Fall.

Answer 2

Ich habe eine JSFiddle wo ich zwei verschachtelte ng-Wiederholungen mit Tabellen, und die übergeordnete ng-Wiederholung auf tbody haben. Wenn Sie eine beliebige Zeile in der Tabelle untersuchen, sehen Sie, dass es sechs tbody-Elemente gibt, d. h. die übergeordnete Ebene.

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>

( Nebenbemerkung: Dies füllt das DOM, wenn man viele Daten auf beiden Ebenen hat, daher arbeite ich an einer Direktive, um Daten zu holen und zu ersetzen, d.h. in das DOM einzufügen, wenn ein Elternteil angeklickt wird, und zu entfernen, wenn ein anderer oder derselbe Elternteil wieder angeklickt wird. Um die Art von Verhalten zu erhalten, die man bei Prisjakt.nu Wenn Sie einen Bildlauf zu den aufgelisteten Computern durchführen und auf die Zeile klicken (nicht auf die Links). Wenn Sie dies tun und die Elemente inspizieren, werden Sie sehen, dass ein tr hinzugefügt und dann entfernt wird, wenn das übergeordnete Element erneut oder ein anderes angeklickt wird. )