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

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

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

 <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的分组等等。主要的是它是一个方便的方式来可视化行使数据更可读。 当然还有其他用途,但就适用范例而言,这是最常见的一个例子。

是。 来自DTD

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

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

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

根据这个例子,可以这样做: w3-struct-tables 。

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> 

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

 <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而不用单独处理多行来在所有内容之间切换,也可以在当前的一天之间切换。

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

编辑: 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元素,但实际上是这样。

我已经创建了一个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被添加和然后如果再次单击父项,则将其删除。)