Question

即使单元格为空，我应该使用什么CSS来显示单元格的边框？

IE 7具体。

Answer 1

如果我记得，除非它充满了某些东西，否则某些IE中不存在该单元格......

如果您可以放置 （不间断空格）来填补空白，那通常会有效。或者您需要纯CSS解决方案吗？

显然，IE8默认显示单元格，你必须用empty-cells:hide隐藏它。但它在IE7中根本不起作用（默认隐藏）。

Answer 2

确保所有单元格中都有数据的另一种方法：

   $(document).ready(function() {
      $("td:empty").html("&nbsp;");
    });

Answer 3

如果将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>

Answer 4

这个问题要求提供一个CSS解决方案，但是HTML解决方案会有机会，这里有一个：

尝试将这两个属性添加到表格元素中： frame =“box”rules =“all” 像这样：

<table border="1" cellspacing="0" frame="box" rules="all">

Answer 5

我刚刚发现了以下内容。它符合标准，但在IE中不起作用。叹息。

empty-cells: show

Answer 6

我碰巧遇到了这个问题，并没有看到任何真正解决这个问题的答案。

问题的结果是因为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。这是一个拉伸，但我认为这些程序员转向网页设计师可能更容易理解。

Answer 7

理想情况下，表格中不应包含任何空单元格。要么你有一个数据表，那个特定的单元格中没有数据（你应该用“ - ”或“n / a /”表示，或者同样合适的东西，或者 - 如果你必须 - ＆amp; nbsp;，正如所建议的那样），或者你有一个需要跨越一列或一行的单元格，或者你正试图用一个你应该使用CSS的表来实现一些布局。

我们可以获得更多细节吗？

Answer 8

这个问题很旧，但仍然是谷歌的最佳结果，所以我会添加我发现的内容：

只需在表格样式中添加border-collapse: collapse就可以在IE7中修复此问题（并且不影响它们在FF，Chrome等中的显示方式）。

最好避免在使用CSS修复时添加 或其他间距元素的无关代码。

Answer 9

我猜这不能用CSS完成; 你需要放一个＆amp; nbsp;在IE的每个空单元格中显示边框...

Answer 10

空单元只修复了Firefox（是的，我在Firefox中确实遇到过这个问题）IE 7＆amp; 8仍然有问题..

这在Firefox 3.6.x，IE 7和Linux中都适用于我。 8，Chrome和Safari：

==============================

table {
*border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

==============================

必须使用*来确保表格样式仅适用于IE浏览器。

Answer 11

如果您不能使用不可破坏的空间，请尝试此操作：

var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);

Answer 12

我创建了一个div样式，其字体颜色与单元格的背景相同，并且可以写入任何内容（通常为“ - ”“n / a”或“empty”）来提供单元格内容。如果您突出显示页面，则会显示，但正常查看时会显示您想要的内容。

Answer 13

我使用混合的html和css来创建跨浏览器表格：

HTML

<table cellspacing="1" style="background-color:#000;" border="0">

CSS

td{background-color:#fff;}

到目前为止，我还没有看到任何浏览器存在任何问题。

Answer 14

“IE”在这种情况下不再是一个有用的术语，因为IE8已经出局了。

IE7总是“空单元格：显示”（或者说我被告知...... Vista）。 IE8的任何“Quirks”或“IE7标准”模式总是“空单元格：隐藏”。 “标准”模式下的IE8默认为“empty-cells：show”，并通过CSS支持该属性。

据我所知，其他所有浏览器都已经正确支持了多年（我知道它已在Firefox 2中添加）。

Answer 15

我从其他网站上拿到了这个，但是：

.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

分别用于表格和TD元素的CSS。

用于制作空单元格边框的CSS？

15 个答案: