CSS CSS使空单元格的边框出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/57002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to make an empty cell's border appear?
提问by Allain Lalonde
What CSS should I use to make a cell's border appear even if the cell is empty?
即使单元格为空，我应该使用什么 CSS 来使单元格的边框出现？
IE 7 specifically.
特别是IE 7。
采纳答案by Grant
If I recall, the cell dosn't exist in some IE's unless it's filled with something...
如果我记得，该单元格在某些 IE 中不存在，除非它充满了某些东西......
If you can put a (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?
如果你可以放一个 （不间断的空格）来填补空白，那通常会奏效。或者你需要一个纯 CSS 解决方案？
Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hideBut it doesn't work at all in IE7 (which hides by default).
显然，IE8 默认显示单元格，你必须用 隐藏它empty-cells:hide但它在 IE7 中根本不起作用（默认情况下隐藏）。
回答by Rasmus
Another way of making sure there is data in all cells:
确保所有单元格中都有数据的另一种方法：
$(document).ready(function() {
$("td:empty").html(" ");
});
回答by rpetrich
If you set the border-collapseproperty to collapse, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want
如果将该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>回答by renozu
The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:
这个问题要求一个 CSS 解决方案，但在偶然的情况下 HTML 解决方案会做，这里是一个：
Try adding these two attributes to the table element: frame="box" rules="all"like this:
尝试将这两个属性添加到 table 元素： frame="box" rules="all"像这样：
<table border="1" cellspacing="0" frame="box" rules="all">
回答by vol7ron
I happened across this question and haven't seen any answers that really addressed the issue.
我碰巧遇到了这个问题，但没有看到任何真正解决该问题的答案。
The problem results because IE7 does not see any internal content for the cell; in programming terms the cell is resulting as a nulland like most things, you cannot border a nullor perform any action on it. The browser needs an element/object that has a layout, in order to apply a border/layout.
问题是因为 IE7 没有看到单元格的任何内部内容；在编程术语中，单元格是作为 a 产生的，null并且像大多数事物一样，您不能将 a 接在 a 上null或对其执行任何操作。浏览器需要一个具有布局的元素/对象，以便应用边框/布局。
Even empty <div></div>or <span></span>do not contain content, thus there is nothing to render, resulting in that nullcase again.
即使是空的<div></div>或<span></span>不包含内容，因此没有什么可渲染的，null再次导致这种情况。
However, you can trick the browser into thinking the cell has content, by giving the empty div/spanlayout properties. The easiest way is to apply the CSS style zoom:1.
但是，您可以通过提供空div/span布局属性来诱使浏览器认为单元格有内容。最简单的方法是应用 CSS 样式zoom:1。
<table>
<tr><td>Foo</td>
<td><span style="zoom:1;"></span></td></tr>
</table>
This workaround is better than using a , since it doesn't unnecessarily mess up screen readers, and isn't misrepresenting the value of the cell. In newer browser you can use the empty-cell:<show|hide>alternative.
此解决方法比使用 a 更好 ，因为它不会不必要地弄乱屏幕阅读器，并且不会歪曲单元格的值。在较新的浏览器中，您可以使用empty-cell:<show|hide>替代方法。
Note:in lieu of Tomalak's comment, it should be understood that hasLayout has nothing to do with null, it was merely a comparison of how the browser interacts and renders hasLayout similarly to how a database or programming language interacts with nulls. It is a strech, but I thought it might be easier to understand for those programmers turned web designers.
注意：代替 Tomalak 的评论，应该理解 hasLayout 与 无关null，它只是浏览器如何交互和呈现 hasLayout 的比较，类似于数据库或编程语言如何与空值交互。这是一个延伸，但我认为对于那些从程序员转向网页设计师的人来说，它可能更容易理解。
回答by Allain Lalonde
I just found the following. It's standards compliant but it doesn't work in IE. sigh.
我刚刚找到了以下内容。它符合标准，但在 IE 中不起作用。叹。
empty-cells: show
回答by Bobby Hyman
Ideally, you shouldn't have any empty cells in a table. Either you have a table of data, and there's no data in that specific cell (which you should indicate with "-", or "n/a/", or something equally appropriate, or - if you must - , as suggested), or you have a cell that needs to span a column or row, or you're trying to achieve some layout with a table that you should be using CSS for.
理想情况下，表格中不应有任何空单元格。要么您有一个数据表，并且该特定单元格中没有数据（您应该用“-”或“n/a/”或同样合适的东西表示，或者 - 如果必须的话 - ，如建议的那样)，或者您的单元格需要跨越一列或一行，或者您正在尝试使用应该使用 CSS 的表格来实现某种布局。
Can we have a bit more detail?
我们可以再详细一点吗？
回答by Voodoo
This question's old, but still a top result in Google, so I'll add what I've found:
这个问题很老，但仍然是谷歌的最高结果，所以我会添加我发现的内容：
Simply adding border-collapse: collapseto the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).
简单地添加border-collapse: collapse到表格样式为我在 IE7 中解决了这个问题（并且不会影响它们在 FF、Chrome 等中的显示方式）。
Best to avoid the extraneous code of adding an or other spacing element when you can fix with CSS.
当您可以使用 CSS 修复时，最好避免添加一个或其他间距元素的无关代码。
回答by fijter
I guess this can't be done with CSS; You need to put a in every empty cell for the border to show in IE...
我想这不能用 CSS 来完成；你需要放一个 在边框的每个空单元格中显示在 IE 中...
回答by Crystal Jones
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
空单元格只修复了 Firefox（是的，我确实在 Firefox 中遇到了这个问题）IE 7 和 8 仍然有问题..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and Safari:
这在 Firefox 3.6.x、IE 7 & 8、Chrome 和 Safari 中都对我有用：
==============================
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
==============================
Had to use the * to make sure the table style was only applied to the IE browser.
必须使用 * 来确保表格样式仅应用于 IE 浏览器。
