Можем ли мы иметь несколько <tbody> в том же <table>?

Можно ли иметь несколько тегов <tbody> в одном и том же <table>? Если да, то в каких сценариях мы должны использовать несколько тегов <tbody>?

ОТВЕТЫ

Ответ 1

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

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }
<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

Ответ 2

Да. Из DTD

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

Поэтому он ожидает один или несколько. Затем он продолжает говорить

Используйте несколько разделов tbody, когда правиланеобходимы между группами таблицы строки.

Ответ 3

В соответствии с этим примером это можно сделать: w3-struct-tables.

Ответ 4

Проблема Martin Joiner вызвана непониманием тега <caption>.

Тег <caption> определяет заголовок таблицы.

Тег <caption> должен быть первым дочерним элементом тега <table>.

Вы можете указать только одну подпись в таблице.

Также обратите внимание, что атрибут scope должен быть помещен в элемент <th>, а не на элемент <tr>.

Правильный способ записи таблицы с несколькими заголовками с несколькими заголовками будет примерно таким:

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

Ответ 5

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

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

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

Ответ 6

EDIT: тег caption принадлежит таблице и, следовательно, должен существовать только один раз. Не связывайте caption с каждым элементом tbody, как я:

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

ПЯТЫЙ ПРИМЕР ВЫШЕ: НЕ КОПИРОВАТЬ

Вышеприведенный пример не отображается так, как вы ожидали бы, потому что подобная запись указывает на непонимание тега caption. Вам понадобится много хакеров CSS, чтобы сделать их корректными, потому что вы будете идти против стандартов.

Я искал стандарты W3Cs в ​​теге caption, но не смог найти явное правило, в котором говорится, что на таблицу должен быть только один элемент caption, но это действительно так.

Ответ 7

Кроме того, если вы запустите HTML-документ с несколькими тегами <tbody> с помощью W3C HTML Validator с HTML5 DOCTYPE, он будет успешно проверки.

Ответ 8

Я создал JSFiddle, где у меня есть два вложенных ng-повтора с таблицами и родительский ng-repeat на tbody. Если вы проверите любую строку в таблице, вы увидите, что есть шесть элементов tbody, то есть родительский уровень.

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>

( Примечание: Это заполняет DOM, если у вас много данных на обоих уровнях, поэтому я работаю над директивой по извлечению данных и замене, т.е. Добавлению в DOM при нажатии родительского элемента и удалении при повторном щелчке другого пользователя или одного и того же родителя. Чтобы получить такое поведение, которое вы найдете на Prisjakt.nu, прокрутите список вниз до перечисленных компьютеров и щелкните по строке (а не по ссылкам), Если вы сделаете это и проверите элементы, вы увидите, что tr добавлен, а затем удален, если родитель снова нажат или другой. )