How can I force a TD with no content to render its border?

StackOverflow https://stackoverflow.com/questions/602285

Question

The TD has a DIV inside which I removed using jQuery's fadeOut function, but when it finishes the border disappears too.

I want to avoid that, is there any way other than adding a " " (which causes it to be ugly)?

EDIT: I am using Internet Explorer (6 and 7)

Was it helpful?

Solution

CSS:

table {
  empty-cells: show;
}

You also need to put IE in standards rendering mode for this to work. After adding a doctype, at least IE8 (Beta 2 and higher) plays nicely.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">

IE7 and below still won't do it. Support for empty-cells is said to be "partial" (for IE7 and IE8 Beta 1) on the MS CSS compatibility statement. Whatever "partial" means, not implementing "show" can hardly be called "partial support". These browsers can be forced to draw the cell borders by generally collapsing table borders:

table {
  border-collapse: collapse;   
}

The setting of empty-cells is ignored. But once you collapse the borders, you don't need to set that anyway, because all browsers will display collapsed borders.

OTHER TIPS

<td style="font-size: 1pt">&nbsp;<td>

Add a non-breaking space to the cell:

<td>&nbsp;</td>

A hack, but a better hack than adding an image.

I ended up adding a transparent 1px image to the cell as suggested by Jukka "Yucca" Korpela. For now I'll use this solution if there is no better alternative

So if you have a table like below:

<table border="1">
<tr>
 <td>Breakfast</td>
 <td><div id="foo">Lunch</div></td>
 <td>Dinner</td></tr>
</table>

And you fadeOut, with jQuery, Lunch, why not bring back a blank nothing with fadeIn?

Like below:

$("#foo").fadeOut("slow").html('').fadeIn("fast");

Depending on what exactly you're trying to accomplish, you could set the visibility-property of the div to hidden instead of setting its display-property to none, ie you'd have to restore display and opacity and set visibility manually after the call to fadeOut().

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top