提问人：Jitendra Vyas 提问时间：6/20/2010 最后编辑：TylerHJitendra Vyas 更新时间：4/13/2022 访问量：215355
我们可以在同一个<表中拥有多个<tbody>吗>？
Can we have multiple <tbody> in same <table>?
答：
50赞
Kris van der Mast
6/20/2010
#1
根据规范中的这个例子，可以做到：w3-struct-tables。
可以分别使用 THEAD、TFOOT 和 TBODY 元素将表行分组为表头、表脚和一个或多个表体部分。
310赞
Martin Smith
6/20/2010
#2
是的。从 DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
因此，它需要一个或多个。然后它继续说
当表组之间需要规则时，使用多个 tbody 部分 行。
评论
13赞
T.J. Crowder
7/12/2013
从 HTML5 规范开始，这略有变化，但基本的“是的，多个元素都可以）”仍然存在。具体来说，如果您愿意，现在可以在 tbody 之后放置一个 tfoot 元素。（他们巧妙地回避了DTD方面，说他们不提供DTD。:-)tbody
780赞
Nick Craver
6/20/2010
#3
是的，您可以使用它们，例如，我使用它们来更轻松地设置数据组的样式，如下所示：
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 等的分组。最主要的是，这是一种直观地对行进行分组的便捷方法，使数据更具可读性。当然还有其他用途，但就适用的例子而言，这个对我来说是最常见的。
评论
6赞
Jitendra Vyas
6/20/2010
好的，谢谢你的精彩回答。屏幕阅读器重要吗，一个还是多个？tbody
1赞
Nick Craver
6/20/2010
@metal-gear-solid - 根据我的经验，它们可以很好地处理它们，例如：就好像它们是一个一样。当您开始嵌套表格时，这通常会给屏幕阅读器带来真正的导航问题。<tbody>
11赞
DisgruntledGoat
6/21/2010
@metal：不，存在语义差异 - 多个元素在表中描述不同的组，如答案中所述。另外，我应该补充一点，通常最好将单元格作为背景，因此 CSS 应该是，例如，<tbody>tbody:nth-child(odd) td { background: #f5f5f5; }
5赞
Tim Down
12/17/2012
“较新的浏览器”的定义是什么？
8赞
Nick Craver
12/17/2012
@TimDown - 当我说“较新的浏览器”时，它仅指链接演示的 CSS 用法，多个将在任何浏览器中工作。:nth-child()<tbody>
8赞
CPslashM
3/6/2012
#4
是的。我使用它们来动态隐藏/显示表格的相关部分，例如课程。 即。
<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，无需单独处理多行，即可在所有内容之间切换或仅切换当前日期。
2赞
Martin Joiner
5/15/2013
#5
编辑：标题标签属于表格，因此应该只存在一次。不要像我那样将标题与每个 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>
上面的错误示例：不要复制
上面的示例不会像您预期的那样呈现，因为像这样编写表明对标记的误解。你需要大量的CSS技巧才能使其正确呈现，因为你会违反标准。caption
我在标签上搜索了 W3C 标准，但找不到明确的规则，规定每个表只能有一个元素，但事实确实如此。captioncaption
17赞
John Slegers
5/31/2013
#6
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>评论
2赞
Pixic
7/31/2013
#7
我创建了一个 JSFiddle，其中我有两个嵌套的带有表的 ng-repeats，以及 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"> </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，然后在再次单击父元素时将其删除。 )
评论
<tbody>