我们可以有多个 in same ?

问题描述 投票：566回答：8

我们可以在同一个<tbody>中有多个<table>标签吗？如果是，那么在什么情况下我们应该使用多个<tbody>标签？

html html-table xhtml
8个回答
686
投票

是的，您可以使用它们，例如我使用它们来更轻松地设置数据组样式，如下所示：

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>

You can view an example here。它只适用于较新的浏览器，但这是我在当前应用程序中支持的，你可以使用JavaScript等分组。主要的是它是一种方便的方式来对行进行可视化分组，使数据更具可读性。当然还有其他用途，但就适用的例子而言，这个是我最常用的例子。

295
投票

是。来自the DTD

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

所以它期望一个或多个。然后继续说

当表行组之间需要rules时，使用多个tbody节。

47
投票

根据这个例子，可以做到：w3-struct-tables。

13
投票

Martin Joiner的问题是由于对<caption>标签的误解引起的。

<caption>标签定义了表格标题。

<caption>标签必须是<table>标签的第一个孩子。

您只能为每个表指定一个标题。

另请注意，scope属性应放在<th>元素上，而不是放在<tr>元素上。

编写多头多tbody表的正确方法是这样的：

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

是。我使用它们来动态隐藏/显示表格的相关部分，例如一门课程。即

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

可以提供一个按钮，通过操作tbodies来切换所有内容或仅在当前日期之间切换，而无需单独处理多行。

4
投票

编辑：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黑客才能使它正确渲染，因为你会违反标准。

我在caption标签上搜索了W3Cs标准，但找不到一个明确的规则，规定每个表必须只有一个caption元素，但实际上就是这种情况。

3
投票

此外，如果您通过<tbody>运行带有多个W3C's HTML Validator标记的HTML文档，并使用HTML5 DOCTYPE，它将成功验证。

2
投票

我已经创建了一个JSFiddle，其中我有两个嵌套的ng-repeats与表，以及父的ng-repeat on 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然后被删除如果再次点击父母或另一个。）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.