如何强制没有内容的 TD 呈现其边框？答案

【问题标题】：How can I force a TD with no content to render its border?如何强制没有内容的 TD 呈现其边框？
【发布时间】：2012-01-04 03:26:49
【问题描述】：

TD 内部有一个 DIV，我使用 jQuery 的 fadeOut 函数将其删除，但是当它完成时边框也会消失。

我想避免这种情况，除了添加“ ”之外还有其他方法吗？（这导致它很丑）？

编辑：我使用的是 Internet Explorer（6 和 7）

【问题讨论】：

标签： jquery internet-explorer fadeout html-table

【解决方案1】：

CSS：

table {
  empty-cells: show;
}

您还需要将 IE 置于标准呈现模式才能使其正常工作。添加 doctype 后，至少 IE8（Beta 2 及更高版本）运行良好。

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

IE7 及以下仍然不会这样做。对empty-cells 的支持据说是the MS CSS compatibility statement 上的“部分”（对于IE7 和IE8 Beta 1）。无论“偏”是什么意思，不执行“秀”都很难称得上是“偏支持”。这些浏览器可以通过通常折叠表格边框来强制绘制单元格边框：

table {
  border-collapse: collapse;   
}

empty-cells 的设置被忽略。但是一旦你折叠了边框，你无论如何都不需要设置它，因为所有的浏览器都会显示折叠的边框。

【讨论】：

@Juan：这是正确的做法，但在IE中不起作用
嗯...它对我有用。您确定空单元格属性设置会出现在您遇到问题的表中吗？也许它在某个地方被覆盖了？
你在用IE吗？我仔细检查了它，它似乎被正确应用了
IE 似乎只有在您折叠边框时才会这样做。我已经相应地编辑了我的答案。
这行得通，但是，它也将所有单元格堆叠在一起，忽略填充。 +1 虽然麻烦

【解决方案2】：

【讨论】：

这是我最终使用的解决方案。 font-size是为了防止nbsp的宽度弄乱布局。我发现“font-size: 0”在我检查的浏览器中有效。

【解决方案3】：

在单元格中添加一个不间断的空格：

<td>&nbsp;</td>

一个 hack，但比添加图像更好。

【讨论】：

@Andrew：你没读过 Juan 的回复吗：他不想这样做，因为它弄乱了他的布局
@Christoph，哥特查。不过我会离开这个帖子。
使用 &转义“”中的＆符号
为什么要投票？它显然没有用，我在我的问题中几乎说出来了，并且在 Tomalak 的回答中进行了辩论

【解决方案4】：

我最终在单元格中添加了一个透明的 1px 图像，名称为 suggested by Jukka "Yucca" Korpela。现在，如果没有更好的选择，我将使用此解决方案

【讨论】：

我认为比 .至少从源代码的角度来看。还是选择文本时的外观让您感到困扰？
是的，就是这个样子……把整张桌子都弄乱了
很多网站都使用这个技巧，所以用户已经习惯了。您可以通过将字体大小减小到 1pt 来稍微改进一下。
1px 图像会产生额外的请求，从而降低您的页面速度。使用是一个更好的解决方案 IMO。
@Magnar，在这种情况下，它是一个 Intranet 应用程序，所以这不是一个真正的问题。还是谢谢

【解决方案5】：

如果你有如下表：

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

而你用 jQuery 淡出，Lunch，为什么不用淡入带回空白呢？

如下：

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

【讨论】：

我虽然想做这样的事情，但是当他们在中间相遇时会发生什么？（不透明度 = 0.5）？我没有尝试，因为我觉得它看起来不太好
可能是错的，但是jQuery链中的链接不是只有在上一个启动后才执行吗？而且由于您在中间有一些虚张声势，因此淡入淡出的火车不应该与淡出太明显地交叉轨道。在 Opera 9、IE6 和 FF3 上测试正常。
您对“可链接性”的看法是正确的；不知道fadeout和fadein之间的边框会不会闪烁，一会儿我测试一下（虽然你说你测试过了……）

【解决方案6】：

根据您要完成的具体任务，您可以将 div 的 visibility-property 设置为 hidden，而不是将其 display-property 设置为 none，即您必须恢复display ~~和opacity~~并在调用fadeOut()后手动设置visibility。

【讨论】：