Hide table rows except heading

Question

Without jQuery or any JavaScript library, I need to hide the rows of a simple html table, except that the table title is loaded on the page.

Answer 1

<style type="text/css">
.mytable tr {
    display: none;
}
</style>

Just kidding. Here we go:

<table border="1" id="mytable">
<th>
    <td>asd</td>
    <td>asd</td>
</th>
<tr>
    <td>asdkjas</td>
    <td>asdasdjwa</td>
</tr>
<tr>
    <td>asdkjas</td>
    <td>asdasdjwa</td>
</tr>
</table>

<script type="text/javascript">
window.onload=function(){
    hideTableRows();
}
function hideTableRows() {
    var myTableRows = document.getElementById("mytable").getElementsByTagName("tr");
    for(i=0;i< myTableRows.length;i++) {
        myTableRows[i].style.display = "none";
    }
}
</script>

I think the table requires rows, it will not be displayed only with headers. I could suggest adding an empty row at the beginning of the table and changing the “i” in the for loop to 1. Thus, the first row should be skipped.

NTN Marko

Answer 2

if your table is correctly marked. You can do something like:

document.getElementById('yourtable')
        .getElementsByTagName('tbody')[0]
        .style.display = 'none';

Then put this on the onload event

CSS + Javascript, .js, CSS.

html.js #yourtable tbody 
{
   display: none;
}

Answer 3

There is no need to resort to javascript, you can do the trick through CSS too:

#table_id tr
{
  display:none;
}

This should hide everything TRsnot TH.