Secret to showing/hiding table rows

Today I learned about showing/hiding content on a page. All that is needed is wrap the content in a div tag, and use the following javascript to toggle its display.

document.getElementById('stufftohide').style.display = 'block' //shows it
document.getElementById('stufftohide').style.display = 'none' // hides it

<div id="stufftohide">
here is my content to show and hide
</div>

However, this technique doesn't work when trying to toggle table rows. I did some digging and found a few blogs that explained the secret. Wrap the rows you want to show/hide inside a <tbody> tag group, and use "table-row-group" in place of "block" to show the rows. Here is a code snippet that works.

<input type="Button" value="Show" onclick="javascript: document.getElementById('stufftohide').style.display = 'table-row-group';">
<input type="Button" value="Hide" onclick="javascript: document.getElementById('stufftohide').style.display = 'none';"><br />
<table border="1">
<tr>
<td>row 1, cell A</td>
<td>row 1, cell B</td>
</tr>
<tbody id="stufftohide">
<tr>
<td>row 2, cell C</td>
<td>row 2, cell D</td>
</tr>
<tr>
<td>row 3, cell E</td>
<td>row 3, cell F</td>
</tr>
</tbody>
</table>