it-swarm.com.ru

Можем ли мы иметь несколько <tbody> в одной и той же <таблице>?

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

569
Jitendra Vyas

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

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>

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

684
Nick Craver

Да. От DTD

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

Так что ожидается один или несколько. Затем он продолжает говорить

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

295
Martin Smith

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

47
Kris van der Mast

Проблема 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>
13
John Slegers

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

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

Может быть предусмотрена кнопка для переключения между всем или только текущим днем ​​путем манипулирования телами без индивидуальной обработки множества строк.

7
CPslashM

Правка: тег 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, но это действительно так.

4
Martin Joiner

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

3
Bern

Я создал JSFiddle , где у меня есть два вложенных ng-повторения с таблицами и родительский ng-повтор на 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.n , если вы прокрутите вниз до перечисленных компьютеров и нажмете на строку (не ссылки). Если вы сделаете это и осмотрите элементы, вы будете увидеть, что tr добавляется, а затем удаляется, если родитель нажимается снова или другой.)

2
Pixic