if I hide a <tr> or <td> in regular stylesheet, how do I show it afterwards (in print stylesheet)? display:block? display:inline, display:inline-table?
or for any other case, like hiding and showing dynamically… what’s default setting for display property for <tr> and <td>??
thank you…
I haven’t tested it but I’d say the default for <tr> is display: table-row , and for <td> it is display: table-cell
When I say I didn’t test it I mean I didn’t create an example to test, I know the actual display values do exist
You could always use a specific Print media style sheet and a Screen media style sheet with differing rules, etc. The table row and table data cell must be contained somewhere within the TABLE.
The TR would equate to: tr { display: table-row; } and the TD would be: td { display: table-cell; } like Remon mentioned.
IE6 and 7 don’t understand the display:table properties and you would need to use display:block (or perhaps inline) to reveal the element otherwise it stays as display:none.
e.g.
tr.hide{display:none}
tr.show{display:table-row}
* html tr.show{display:block}
*+ html tr.show{display:block}
You could always use a specific Print media style sheet and a Screen media style sheet with differing rules, etc.
I end up with a LOT less code this way. Instead of undoing everything inherited from screen sheet, I keep screen and print separate: they both start out at 0.
oh my gosh… hadn’t seen these responses… I thought I’d be notified on all my posts… yeah, this WAS for a print situation… thank you…
to return an element back to it’s default display style dynamically you can use something similar to this:
document.getElementById('elemId').style.display = '';
^I’ve always wondered… if IE has issues with display: table/row/etc when you set it manually in the CSS (but apparently not by default), does IE do ok when Javascript says “use the default display state”?
when I set the display style to an empty string in javascript I find (and I actually found this out on another forum) the display style for that element returns to the browser’s default display style for that element.
the issue came up when someone in js was setting the display style of a <tr> to none to hide it and then wondered why it wouldn’t reappear when they set the <tr> to block.
the solution someone suggested was setting the display style of the <tr> to ‘’ (empty string) and the browser would then set the display style of the <tr> to whatever the browser default is for a <tr> and then the <tr> would reappear.
a <tr> can’t be displayed as a block level element and that is why display block didn’t work.
as far as I can tell this works in all the major browsers.
Cool. IE is ok with a lot of things as defaults while sucking with CSS (like outline on :focus).
Yes I ran into that issue a while ago and used the same solution. It’s a shame there isn’t an equivalent in CSS though.
If we talk about <tr> alone, and about a IE solution, there is a CSS solution. Wrap the <tr> in a <tbody> (remember, you can have as many <tbody> in a <table> as you want) and play with it.
I did an example, a rushed one, I’m at work now. For the last table I didn’t make a js code to change the class, I just put the two class values for it. With a little change, this <tbody> solution can be made to work for all UAs. All you have to do is to remove the * in the selector for them. That one is for IE.
But, as pointed out before, for the other UAs you have better, more natural options: display: table, table-row, table-cell. One that seems to escape the mind of those contributing to this thread is floating. Floating doesn’t change the display completely, so a float:left, a position outside the viewport and a float:none afterwards should preserve the core display attributes for the table elements. For IE floating is useless though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<title>Tables: hide and seek</title>
<style type="text/css">
table, td {
border: solid 1px black;
}
.noshow * {
position:absolute;
left:-9999em;
}
.noshow_withspace * {
position:relative;
left:-9999em;
}
.show * {
position:relative;
left:0;
}
</style>
</head><body>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow_withspace">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow show">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
</body></html>
This seems to work fine also 
/* hide a table row */
#row1,#row3{display:none}
/* and in the print stylesheet restore the row */
#row1,#row3{display:block}/* ie6 and 7*/
#row1,#row3{display:table-row}
/* hide a table cell */
#cell2,#cell4{display:none}
/* and in the print stylesheet restore the cell*/
#cell2,#cell4{display:block}/* ie6 and 7*/
#cell2,#cell2{display:table-cell}
That works for all as far as I can tell.
Yes, Paul. It does
and I did aknowledge that
The whole point of my exercise was: how to do it w/o resorting to the display rule. For IE one could use <tbody> with positioning and * selector, for the other UAs <tbody> with positioning… or floated and positioned! That way you can also have an empty space instead of the element, as a remainder that there is an element removed from there. This thing may come in handy. Take a look at the following code in IE8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<title>Tables: hide and seek</title>
<style type="text/css">
table, td {
border: solid 1px black;
}
tbody {
float:left;
}
.noshow * {
position:absolute;
left:-9999em;
}
.noshow_withspace * {
position:relative;
left:-9999em;
}
.show * {
position:relative;
left:0;
}
</style>
</head><body>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow_withspace">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>One: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
<tbody class="noshow show">
<tr>
<td>Two: </td>
<td>an invisible </td>
<td>row. Sometimes.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three: </td>
<td>a visible </td>
<td>row.</td>
</tr>
</tbody>
</table>
</body></html>
While many, when making the transition from tables layout, consider each <td> or <tr> a <div>, they forget that <tbody> is more like it to be replaced with a <div> element, if we consider <table> to be <body>. <tbody> does that: provides a way to add structure. And floating <tbody>s, hiding or displaying them, makes for quite interesting features 
Too bad IE lte 7 doesn’t behave with the floating thing.
As far as hidding the <td>, I believe hidding its content alone is more appropriate.
Ahh ok - I missed that
Sounds a bit like a quiz now
You could do something like this without using the display property but leaves a small gap in Ie6 and 7 though.
/* hide */
tr#row3{line-height:0;height:0;overflow:hidden;float:left;visibility:hidden;}
/* show*/
tr#row3{line-height:normal;height:auto;overflow:visible;float:none;visibility:visible;}
Well, I was about going to propose that to be a quiz, but then changed my mind
I wanted to show how tables, though overused and misused, are not properly understood at their very basic structure. I’m always surprised how many overlook the <tbody> as an element to give structure to tables content and what you can do with it.
And I wanted to point out the use for relative positioning and the initial space remaining as “occupied” when using it on elements.
Two things that seem never to be pointed enough times
Too bad [IE lte 7] doesn’t want to float <tbody>. And too bad IE8 doesn’t want to float <tr>. Or any other UA.
I’m always surprised how many overlook the <tbody> as an element to give structure to tables content and what you can do with it.
I seem to recall that, because browsers assume a tbody even when you don’t explicitly set one (like it would with body and html tags if you left them out), that javascript actually still has access to table.tBodies (I think it’s called that… I don’t do much with tables and JS).