我们可以在同一个<表>中有多个<tbody>标签吗?如果是，那么在什么情况下我们应该使用多个<tbody>标签?
当前回答
是的。我用它们动态地隐藏/显示一个表的相关部分，例如一个课程。 即。
<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来切换当前日期，而不需要单独处理许多行。
其他回答
是的。我用它们动态地隐藏/显示一个表的相关部分，例如一个课程。 即。
<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来切换当前日期，而不需要单独处理许多行。
是的，你可以使用它们，例如，我用它们更容易地设置数据组的样式，像这样:
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等分组。最主要的是，这是一种方便的方式，可以直观地对行进行分组，使数据更具可读性。当然，还有其他用法，但就适用的示例而言，这是我最常用的用法。
是的。来自DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
所以它需要一个或多个。它接着说
规则时使用多个tbody节 组与组之间是否需要表 行。
我已经创建了一个JSFiddle，其中有两个嵌套的ng-repeat表，父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"> </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. )
根据规范中的这个例子，可以这样做:w3-struct-tables。
表行可以分别使用THEAD、TFOOT和TBODY元素被分组为表头、表脚和一个或多个表体部分。
