我们可以在同一个<table>中有多个<tbody>吗？

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

Answer 1

是的，你可以使用它们，例如我使用它们来更方便地设置风格的数据组，如下所示：

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

那么你可以很容易地设计它们，就像这样：

 tbody:nth-child(odd) { background: #f5f5f5; } tbody:nth-child(even) { background: #e5e5e5; } 

你可以在这里查看一个例子 ，它只能在较新的浏览器中工作…但这是我在当前的应用程序支持，你可以使用JavaScript的分组等等。主要的是它是一个方便的方式来可视化行使数据更可读。 当然还有其他用途，但就适用范例而言，这是最常见的一个例子。

Answer 2

是。 来自DTD

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

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

当需要在表行组之间进行规则时，使用多个tbody部分。

Answer 3

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

Answer 4

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> 

Answer 5

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

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

可以提供一个按钮，通过操纵tbody而不用单独处理多行来在所有内容之间切换，也可以在当前的一天之间切换。

Answer 6

另外，如果通过W3C的HTML验证器 （HTML5 DOCTYPE）运行带有多个<tbody>标签的HTML文档，它将成功验证。

Answer 7

编辑： 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标签上搜索了W3C标准，但找不到一个明确的规则，规定每个表只能有一个caption元素，但实际上是这样。

Answer 8

我已经创建了一个JSFiddle ，其中有两个嵌套的表格，并且在tbody上重复ng-repeat。 如果你检查表中的任何一行，你会看到有六个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被添加和然后如果再次单击父项，则将其删除。）