CSS使一个空单元格的边框出现？
即使单元格是空的，我应该使用什么CSS来制作单元格边框？
IE 7具体。
如果我记得，细胞dosn't存在于一些IE浏览器，除非它充满了一些东西…
如果你可以把一个 （非破坏空间）来填补空白，这通常会起作用。 还是你需要一个纯粹的CSS解决scheme？
显然，IE8默认显示了单元格，你必须用empty-cells:hide来隐藏它empty-cells:hide但是在IE7中它根本不起作用（默认隐藏）。
确保所有单元格中都有数据的另一种方法是：
$(document).ready(function() { $("td:empty").html(" "); });
如果将border-collapse属性设置为collapse ，则IE7将显示空白单元格。 它也崩溃了边界，所以这可能不是100％你想要的
td { border: 1px solid red; } table { border-collapse: collapse; } <html> <head> <title>Border-collapse Test</title> <style type="text/css"> td { border: 1px solid red; } table { border-collapse: collapse; }
<table> <tr> <td></td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td></td> <td>test</td> </tr> <tr> <td>test</td> <td></td> <td>test</td> </tr> <tr> <td>test</td> <td></td> <td /> </tr> </table>
这个问题要求提供一个CSS解决scheme，但是HTML解决scheme将不可能实现，下面是一个：
尝试将这两个属性添加到表格元素中： frame =“box”rules =“all” like this：
<table border="1" cellspacing="0" frame="box" rules="all">
我刚刚发现以下内容。 它符合标准，但在IE中不起作用。 叹。
empty-cells: show
我在这个问题上发生了，并没有看到真正解决这个问题的答案。
这个问题的结果，因为IE7没有看到任何单元格的内部内容; 在编程术语中，单元格是由于null而产生的，并且与大多数情况类似，您不能在其上边界null或执行任何操作。 浏览器需要一个具有布局的元素/对象，以便应用边界/布局。
即使是空的<div></div>或<span></span>也不包含内容，因此没有任何内容需要呈现，导致再次出现null情况。
但是，通过给出空的div/span布局属性，可以诱使浏览器认为单元格具有内容。 最简单的方法是应用CSS样式zoom:1 。
<table> <tr><td>Foo</td> <td><span style="zoom:1;"></span></td></tr> </table>
这个解决方法比使用 ，因为它不会不必要地弄乱屏幕阅读器，也不会歪曲单元格的价值。 在较新的浏览器中，您可以使用empty-cell:<show|hide>替代方法。
注意：代替Tomalak的评论，应该明白，hasLayout与null无关，它仅仅是浏览器如何交互和呈现hasLayout的一个比较，类似于数据库或编程语言如何与空值交互。 这是一个strech，但我认为这可能会更容易理解那些程序员转向网页devise师。
理想情况下，你不应该在表中有任何空单元格。 要么你有一张数据表，而且这个特定的单元格中没有数据（你应该用“ – ”，“n / a /”或者其他合适的方式表示，或者 – 如果你必须的话） – 按照build议），或者你有一个单元格需要跨越一列或一行，或者你正在试图用一个你应该使用CSS的表格来实现一些布局。
我们可以有更多的细节？
这个问题是旧的，但仍然是谷歌的一个重要成果，所以我会添加我发现的：
简单地添加border-collapse: collapse到表格样式为我在IE7中解决了这个问题（并且不影响它们在FF，Chrome等中的显示方式）。
最好避免无关的代码添加一个 或其他间距元素，当你可以用CSS修复。
我想这不能用CSS来完成。 你需要把一个＆nbsp; 在每一个空的单元格边框在IE中显示…
空单元只有固定的Firefox（是的，我真的有这个问题在Firefox）IE 7和8仍然有问题..
这对Firefox 3.6.x，IE 7＆8，Chrome和Safari都有效：
==============================
table { *border-collapse: collapse;} .sampleTD { empty-cells: show;}
==============================
必须使用*来确保表格样式仅适用于IE浏览器。
如果你不能使用非易碎空间，试试这个：
var tn = document.createTextNode('\ '); yourContainer.appendChild(ta);
我创build了一个div样式，它和你的单元格的背景具有相同的字体颜色，并且写入任何东西（通常是“ – ”，“n / a”或“empty”）以给出单元格的内容。 如果您突出显示该页面，则显示该页面，但在正常浏览时看起来如何。
我使用html和css的混合来创build跨浏览器表格网格：
HTML
<table cellspacing="1" style="background-color:#000;" border="0">
CSS
td{background-color:#fff;}
到目前为止，我还没有看到任何浏览器的问题。
IE8已经不在IE中了，IE在这方面已经不是一个有用的术语了。
IE7总是做“空细胞：秀”（或者我告诉… Vista）。 IE8在其任何“怪癖”或“IE7标准”模式下总是会“空单元：隐藏”。 标准模式下的IE8默认为“empty-cells：show”，并通过CSS支持该属性。
据我所知，其他浏览器已经正确支持了这几年（我知道它是在Firefox 2中添加的）。
我从另一个网站采取这个，但是：
.sampletable { border-collapse: collapse;} .sampleTD { empty-cells: show;}
分别用于CSS和TD元素的CSS。
