首页 / 知识

使空单元格边框出现的CSS？

2023-04-15 00:09:00

CSS to make an empty cell's border appear?

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

特别是IE7。

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

如果可以放置(不间断空格)来填充空白，通常可以使用。还是您需要纯CSS解决方案？

显然，IE8默认显示单元格，您必须使用empty-cells:hide将其隐藏，但是它在IE7中完全不起作用(默认情况下是隐藏的)。

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

1
2
3

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

如果将border-collapse属性设置为collapse，则IE7将显示空白单元格。尽管它也会折叠边框，所以这可能不是您想要的100％

1
2
3
4
5
6
7
8
9
10
11
12

td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> Border-collapse Test <style type="text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

1	empty-cells: show

理想情况下，表中不应有任何空单元格。您有一个数据表，并且该特定单元格中没有数据(应使用"-"或" n / a / "或同等适当的值来指示，或者-如果您必须-，如建议的那样)，或者您的单元格需要跨越一列或一行，或者您正在尝试使用应该用于CSS的表格来实现某些布局。

我们可以再详细一点吗？

我想CSS无法做到这一点；
您需要在每个空白单元格中放置一个，以便边框在IE中显示...

仅空单元修复了Firefox(是的，我确实在Firefox中确实存在此问题)IE 7

我正在从另一个网站上取这个，但是：

1
2
3
4
5

.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

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

既然IE8已经发布，在这种情况下

" IE "不再是一个有用的术语。

IE7总是执行" empty-cells：show "(或者这样告诉我... Vista)。
IE8在其任何" Quirks"或" IE7 Standards"模式下始终会执行" empty-cells：hide "。
" Standards "模式下的IE8默认为" empty-cells：show "，并通过CSS支持该属性。

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

边框显示解决方案填充空白