ansaurus

Question

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

Answer 1

+5 A:

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"&gt;

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.

Tomalak 2009-03-02 13:08:44

@Juan: this is the correct way to do it, but it doesn't work in IE

Christoph 2009-03-02 13:13:39

ah, but I am using IE 7

Juan Manuel 2009-03-02 13:13:58

Hm... it works for me. Are you sure the empty-cells property setting makes it to that table you hare having problems with? Maybe it's overridden somewhere?

Tomalak 2009-03-02 13:14:36

Are you using IE? I double checked it, it seems to be correctly applied

Juan Manuel 2009-03-02 13:15:28

IE seems to do it only when you collapse the borders. I've edited my answer accordingly.

Tomalak 2009-03-02 13:17:49

That works, however, it also stacks all cells together, ignoring the padding. +1 for the trouble though

Juan Manuel 2009-03-02 13:21:32

You can do the padding within the cell. Or do you want to display double borders?

Tomalak 2009-03-02 13:29:46

Thanks for the reminder =); I already got it working with the transparent image, but I'll try this in a bit and if it works, I'll accept this answer as it's a better solution. Thanks.

Juan Manuel 2009-03-02 16:09:46

Answer 2

+3 A:

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

Juan Manuel 2009-03-02 13:22:41

I think the <img> is way more ugly than the . From a source code point of view at least. Or is it the look when the text is selected that bothers you?

Tomalak 2009-03-02 13:31:59

Yes, it's the look... it messes up the whole table

Juan Manuel 2009-03-02 13:41:09

Lots of sites use the trick, so users are used to it. You can improve it a little by reducing the font size to 1pt.

finnw 2009-03-02 13:52:46

I prefer the 1px image over that, but thanks

Juan Manuel 2009-03-02 13:54:03

The 1px image creates an additional request, slowing down your page. Using is a better solution IMO.

Magnar 2009-03-02 14:05:20

@Magnar, in this case, it's an intranet application, so that is not really an issue. Thanks anyway

Juan Manuel 2009-03-02 14:22:03

<reminder>What about the question I asked in the comments to my answer?</reminder>

Tomalak 2009-03-02 15:28:45

Answer 3

A:

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().

Christoph 2009-03-02 13:37:07

Answer 4

+2 A:

Add a non-breaking space to the cell:

<td> </td>

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

Andrew Robinson 2009-03-02 13:46:12

@Andrew: didn't you read Juan's responses: he doesn't want to do this because it messes up his layout

Christoph 2009-03-02 13:47:34

@Christoph, gothcha. I will leave the post though.

Andrew Robinson 2009-03-02 13:49:12

finnw 2009-03-02 13:51:36

Andrew Robinson 2009-03-02 21:40:27

Why is this upvoted? It clearly isn't useful, I pretty much say it in my question, and it's debated on Tomalak answer

Juan Manuel 2009-03-03 16:30:45

Answer 5

+3 A:

finnw 2009-03-02 13:48:46

why set the font size?

Andrew Robinson 2009-03-04 00:46:25

This is the solution I wound up using. The font-size is to prevent the width of the nbsp from messing up the layout. I found that "font-size: 0" works in the browsers I checked.

bukzor 2010-04-28 02:25:22

Answer 6

A:

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");

random 2009-03-02 14:18:12

I though about doing something like this, but what happens when they meet in the middle? (Opacity = 0.5)? I didn't try it because I though it wouldn't look good

Juan Manuel 2009-03-02 14:22:55

Could be wrong, but don't the links in the jQuery chain execute only after previous has gone to boot? And since you have some bluff in the middle, the fadeIn train shouldn't cross tracks with the fadeOut too noticeably. Tested okay on Opera 9, IE6 and FF3.

random 2009-03-02 14:32:26

You are right about the "chainability"; I don't know if the borders will flicker between the fadeout and the fadein, I'll test it in a while (although you say you tested it...)

Juan Manuel 2009-03-02 16:11:32

ansaurus

tags:

views:

answers:

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

related questions