Can we have multiple tbody in same table?
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>
Wrapper for multiple tbody?
As mentioned in the comments by FelipeAls and others that a <tbody>
tag can be wrapped only by a <table>
tag, I tried wrapping <thead>
and <tbody>
s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.
Accessibility with multiple tbody tags in a table
Through the comments, I found this issue is related to Chrome w/ NVDA. Firefox w/ NVDA works as expected.
To work cross browser w/ NVDA, I built multiple tables, one for each th, and removed the headers and id attributes because it makes more semantic sense to do so. Here's an example of it working cross browser (Chrome, Firefox) with NVDA
<table>
<caption class="offScreen">Balance Sheet Table</caption>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Assets (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left">Cash</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">10,232.00</td>
<td class="right">--</td>
</tr>
<tr class="hierarchy4">
<td class="left">Cash Equivalents</td>
<td class="right">10,746.00</td>
<td class="right">14,259.00</td>
<td class="right">13,844.00</td>
<td class="right">21,120.00</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Liability And Shareholder Equity (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left">Accounts Payable</td>
<td class="right">21,175.00</td>
<td class="right">22,367.00</td>
<td class="right">30,196.00</td>
<td class="right">35,490.00</td>
</tr>
<tr class="hierarchy4">
<td class="left">Income Tax Payable</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Supplemental (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy1">
<td class="right">Total Capitalization</td>
<td class="right">111,210.00</td>
<td class="right">140,509.00</td>
<td class="right">140,534.00</td>
<td class="right">172,818.00</td>
</tr>
<tr class="hierarchy1">
<td class="left">Capital Lease Obligations</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
<tr class="hierarchy1">
<td class="left">Preferred Stock Equity</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
</tbody>
Using readHTMLTable with multiple tbody
If you look at the source for readHTMLTable
getMethod(readHTMLTable, "XMLInternalElementNode")
it contains the line
if (length(tbody))
node = tbody[[1]]
so it is purposefully designed to select only the content of the first tbody. Also ?readHTMLTable
describes the function as providing
somewhat robust methods for extracting data from HTML tables in an HTML document
It is designed to be a utility function. Its great when it works but you may need to hack around it.
Related Topics
Last Margin/Padding Collapsing in Flexbox/Grid Layout
A Space Between Inline-Block List Items
Use Images Instead of Radio Buttons
How to Make an HTML Button Not Reload the Page
Set Content Height 100% Jquery Mobile
Css Selector by Inline Style Attribute
Why Do Absolute Elements Stack Up on Each Other Instead of Stacking One After the Other
Show Youtube Video Source into Html5 Video Tag
How to Create a Marquee Effect
How to Use Google Chrome 11'S Upload Folder Feature in My Own Code
Font Awesome 5 on Pseudo Elements Shows Square Instead of Icon
How to Style Even and Odd Elements
How to Deal With Page Breaks When Printing a Large HTML Table
Center Image Horizontally Within a Div
Make a Grid Item Span to the Last Row/Column in Implicit Grid
Manually Triggering Form Validation Using Jquery