我们可以在同一个<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>
You can view an example here。它只适用于较新的浏览器,但这是我在当前应用程序中支持的,你可以使用JavaScript等分组。主要的是它是一种方便的方式来对行进行可视化分组,使数据更具可读性。当然还有其他用途,但就适用的例子而言,这个是我最常用的例子。
根据这个例子,可以做到: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>
可以提供一个按钮,通过操作tbodies来切换所有内容或仅在当前日期之间切换,而无需单独处理多行。
编辑: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
标签上搜索了W3Cs标准,但找不到一个明确的规则,规定每个表必须只有一个caption
元素,但实际上就是这种情况。
此外,如果您通过<tbody>
运行带有多个W3C's HTML Validator标记的HTML文档,并使用HTML5 DOCTYPE,它将成功验证。
我已经创建了一个JSFiddle,其中我有两个嵌套的ng-repeats与表,以及父的ng-repeat on 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>
(旁注:如果你在两个级别都有很多数据,这就填满了DOM,因此我正在制定一个指令来获取数据并替换,即在点击父级时添加到DOM中并在单击另一个时删除或同一父级为了获得你在Prisjakt.nu上找到的行为,如果你向下滚动到列出的计算机并单击行(而不是链接)。如果你这样做并检查元素,你会看到添加了tr然后被删除如果再次点击父母或另一个。)