Home » Blogs » jeff's blog

Hide/show table rows using JavaScript

I wanted have a HTML table where toggle the visibility of its rows (TR elements) using display:block. This is wrong. You need to use display:table-row.

Without using the table-row property, the TR will not have the proper column widths. This is a problem when using Firefox or other Gecko-based browser.

Improper vs. Improper way to hide or show a TR element using javascript.

Sample Table

<table>

<tr id="showme" style="display:none">
    <td>I am in a row</td>

</tr>

</table>

test = document.getElementById("showme");
test.style.display = ‘block’; //wrong
test.style.display = ‘table-row’; //correct