CODEWITHSUNDEEP
htmlasp.nethtml-table
Bill Miller
Bill Miller

Reputation: 71

HTML Table Rows

What is the best way to turn off the visibility of a row(s) and have the gaps removed. Also the reverse, if turning on the visibility making sure that the visible row(s) are displayed again.

Upvotes: 0

Views: 509

Answers (4)

Jon Adams
Jon Adams

Reputation: 25137

Chris is right, except setting the value back to the correct table display type would be a little more correct when showing it again. For a <TR>, you would use display: table-row. See CSS Display Property.

Update: bobince's response is a more practical response on how to use (and not use) the display attribute.

Upvotes: 0

bobince
bobince

Reputation: 536339

If you do it with the display property as suggested so far, you have to worry about block vs. table-row. table-row is correct, but IE doesn't support it, so you have to browser-sniff to choose.

Potentially easier is to avoid setting the style directly, doing it with a CSS class rule instead:

tr.hidden { display: none; }

row.className= 'hidden'; // sets display to none
row.className= ''; // resets display to its default value

Upvotes: 4

Chris
Chris

Reputation: 3517

If you wish to do this on the client (i.e. through javascript) try set the style.display to 'none' (and 'block' to turn it back on).

If you wish to handle it on the server set the visibility of the row to false, this will prevent the row from rendering.

Edit - With example:

function ShowHideRow(row, show)
{
    document.getElementById(row).style.display = (show ? 'block' : 'none');
}

note you may wish to follow the advise of Mufasa and use table-row instead of block.

Upvotes: 4

Echilon
Echilon

Reputation: 10244

You need to set the 'display' property of the row (the ) to 'none'. Through either JavaScript as Chris said or with CSS.

Upvotes: 1

Related Questions