Html 我们可以在同一个 <table> 中有多个 <tbody> 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3076708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can we have multiple <tbody> in same <table>?
提问by Jitendra Vyas
Can we have multiple <tbody>tags in same <table>? If yes then in what scenarios should we use multiple <tbody>tags?
我们可以有多个<tbody>标签<table>吗？如果是，那么在什么情况下我们应该使用多个<tbody>标签？
回答by Nick Craver
Yes you can use them, for example I use them to more easily style groups of data, like this:
是的，您可以使用它们，例如我使用它们来更轻松地设置数据组的样式，如下所示：
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. It'll only work in newer browsers, but that's what I'm supporting in my current application, you can use the grouping for JavaScript etc. The main thing is it's a convenient way to visually group the rows to make the data much more readable. There are other uses of course, but as far as applicable examples, this one is the most common one for me.
您可以在此处查看示例。它只适用于较新的浏览器，但这是我在当前应用程序中支持的，您可以使用 JavaScript 等的分组。主要是它是一种方便的方式来对行进行可视化分组以使数据更具可读性. 当然还有其他用途，但就适用的例子而言，这一种对我来说是最常见的。
回答by Martin Smith
回答by Kris van der Mast
According to this example it can be done: w3-struct-tables.
根据这个例子，它可以完成：w3-struct-tables。
回答by John Slegers
Martin Joiner's problem is caused by a misunderstanding of the <caption>tag.
Martin Joiner 的问题是由于对<caption>标签的误解造成的。
The <caption>tag defines a table caption.
该<caption>标签定义了表格标题。
The <caption>tag must be the first child of the <table>tag.
该<caption>标签必须是该标签的第一个子代<table>。
You can specify only one caption per table.
每个表格只能指定一个标题。
Also, note that the scopeattribute should be placed on a <th>element and not on a <tr>element.
另请注意，该scope属性应放在<th>元素上，而不是放在<tr>元素上。
The proper way to write a multi-header multi-tbody table would be something like this :
编写多头多 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>回答by CPslashM
Yes. I use them for dynamically hiding/revealing the relevant part of a table, e.g. a course. 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>
A button can be provided to toggle between everything or just the current day by manipulating tbodies without processing many rows individually.
通过操作 tbody 无需单独处理多行，可以提供一个按钮来在所有内容或仅当前日期之间切换。
回答by Martin Joiner
EDIT: The captiontag belongs to table and thus should only exist once. Do not associate a captionwith each tbodyelement like I did:
编辑：caption标签属于表，因此应该只存在一次。不要像我一样将acaption与每个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>
BAD EXAMPLE ABOVE: DO NOT COPY
上面的坏例子：不要复制
The above example does not render as you would expect because writing like this indicates a misunderstanding of the captiontag. You would need lots of CSS hacks to make it render correctly because you would be going against standards.
上面的例子没有像你期望的那样呈现，因为这样写表明对caption标签的误解。您需要大量的 CSS 技巧才能使其正确呈现，因为您将违反标准。
I searched for W3Cs standards on the captiontag but could not find an explicit rule that states there must be only one captionelement per table but that is in fact the case.
我在caption标签上搜索了 W3Cs 标准，但找不到明确的规则，规定caption每个表必须只有一个元素，但事实确实如此。
回答by Bern
In addition, if you run a HTML document with multiple <tbody>tags through W3C's HTML Validator, with a HTML5 DOCTYPE, it will successfully validate.
此外，如果您<tbody>通过W3C 的 HTML Validator运行带有多个标签的 HTML 文档，使用 HTML5 DOCTYPE，它将成功验证。
回答by Pixic
I have created a JSFiddlewhere I have two nested ng-repeats with tables, and the parent ng-repeat on tbody. If you inspect any row in the table, you will see there are six tbody elements, i.e. the parent level.
我创建了一个JSFiddle，其中有两个嵌套的 ng-repeat 和表，以及 tbody 上的父 ng-repeat。如果您检查表中的任何行，您将看到有六个 tbody 元素，即父级。
HTML
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"> </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>
( Side note: This fills up the DOM if you have a lot of data on both levels, so I am therefore working on a directive to fetch data and replace, i.e. adding into DOM when clicking parent and removing when another is clicked or same parent again. To get the kind of behavior you find on Prisjakt.nu, if you scroll down to the computers listed and click on the row (not the links). If you do that and inspect elements you will see that a tr is added and then removed if parent is clicked again or another. )
（旁注：如果您在两个级别都有大量数据，这会填满 DOM，因此我正在研究获取数据和替换的指令，即在单击父级时添加到 DOM 并在单击另一个或同一父级时删除再次。要获得您在Prisjakt.nu 上找到的那种行为，如果您向下滚动到列出的计算机并单击该行（而不是链接）。如果您这样做并检查元素，您将看到添加了一个 tr 并且如果再次或其他点击父级，则删除。）
