Hide/show table rows using JavaScript

Submitted by jeff on Tue, 08/19/2008 - 00:20.

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

Not working in IE...

This does not work in IE but works in FF (I tested in FF 3.6 and IE 7). In IE you have to use ‘block’ instead of ‘table-row’.

reply

Great Tips

Thanks for this great tips.

reply

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
eight + = twelve
Solve this math question and enter the solution with digits. E.g. for "two plus four = ?" enter "6".