CSS 使空单元格的边框显示？

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

特别是 IE 7。

76940 次浏览
小开
最佳答案

如果我没记错的话，在 IE 里面是不存在细胞的，除非里面填满了什么东西。

如果你可以用不换行空格来填补这个空白，通常会奏效。还是需要纯 CSS 解决方案？

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

小开

我想这不能用 CSS 来完成; 您需要在每个空单元格中放置 a，以便在 IE 中显示边框..。

小开

我刚刚发现了以下内容。它符合标准，但是在 IE 中无法工作。

empty-cells: show
小开

理想情况下，表中不应该有任何空单元格。要么你有一个数据表，但是在那个特定的单元格中没有数据(你应该用“-”，或者“ n/a/”，或者同样合适的东西，或者-如果你必须-& nbsp; ，就像建议的那样) ，要么你有一个需要跨越一列或一行的单元格，或者你正试图用一个你应该使用 CSS 的表来实现某种布局。

能说得再详细点吗？

小开

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

小开

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

IE7总是做“空单元: 显示”(或者我被告知... Vista)。 IE8在其任何“怪异”或“ IE7标准”模式下总是“空单元格: 隐藏”。 IE8在“ Standards”模式下默认为“ void-cells: show”，并通过 CSS 支持该属性。

据我所知，其他浏览器几年前就已经正确支持这个功能了(我知道它是在 Firefox 2中添加的)。

小开

确保所有单元都有数据的另一种方法是:

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

我是从另一个网站上看到的，但是:

.sampletable {
border-collapse: collapse;}


.sampleTD {
empty-cells: show;}

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

小开

空单元只修复 Firefox (是的，我在 Firefox 中确实有这个问题) IE7和 IE8仍然有问题。

这对我在 Firefox 3.6.x，IE 7 & 8，Chrome 和 Safari 上都有效:

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

table {
*border-collapse: collapse;}


.sampleTD {
empty-cells: show;}

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

必须使用 * 来确保表样式只应用于 IE 浏览器。

小开

这个问题需要一个 CSS 解决方案，但是 HTML 解决方案可能性不大，这里有一个:

尝试将这两个属性添加到 table 元素: < strong > frame = “ box”rules = “ all” 像这样:

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

这个问题已经过时了，但仍然是谷歌搜索结果中的第一位，因此我将添加我所发现的内容:

简单地将 border-collapse: collapse添加到表格样式中就可以在 IE7中修复这个问题(并且不会影响它们在 FF、 Chrome 等中的显示方式)。

当您可以使用 CSS 修复时，最好避免添加 &nbsp;或其他间距元素的无关代码。

小开

我偶然发现了这个问题，但没有看到任何真正解决这个问题的答案。

问题的产生是因为 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>

这种变通方法比使用 &nbsp;要好，因为它不会不必要地搞乱屏幕阅读器，也不会误报单元格的值。在较新的浏览器中，您可以使用 empty-cell:<show|hide>替代品。

注意: 代替 Tomalak 的注释，我们应该理解 hasLayout 与 null没有任何关系，它只是一个浏览器如何交互和呈现 hasLayout 的比较，类似于数据库或编程语言如何与 null 交互。这是一个延伸，但我认为它可能更容易理解为那些程序员转向网页设计师。

小开

如果你不能使用不可破坏的空间，试试这个:

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

我创建了一个 div 样式，它的字体颜色与单元格的背景颜色相同，并写入任何内容(通常是“-”“ n/a”或“ null”)以给出单元格内容。如果您突出显示页面，它就会显示出来，但如果正常浏览，看起来就像您希望的那样。

小开

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

Html

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

CSS

td{background-color:#fff;}

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


提交答案