What CSS should I use to make a cell's border appear even if the cell is empty?
IE 7 specifically.
+8
A:
If I recall, the cell dosn't exist in some IE's unless it's filled with something...
If you can put a (non breaking space) to fill the void, that will usually work. Or do you require a pure css solution?
Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default)
Grant
2008-09-11 16:09:23
Pure CSS would be nice. I already have nbsps in there, but it feels dirty. :)
Allain Lalonde
2008-09-11 16:13:14
as far as I know, that is the only solution, it's what we do.
Juan Mendes
2009-12-16 19:04:34
I would not do that. Add a <span style='width:0px;'></span> instead. Putting will cause a problem with Firefox when zoomed in.
wbkang
2010-07-15 06:10:14
+1
A:
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...
D4V360
2008-09-11 16:10:41
+2
A:
I just found the following. It's standards compliant but it doesn't work in IE. sigh.
empty-cells: show
Allain Lalonde
2008-09-11 16:16:51
It does work in IE8 though, so just give it about a decade, and you're good to go.
Grant
2008-09-11 16:19:12
Amusingly it also works for an standard html <table> in IE6 but not an ASP.NET table :)
Rich Andrews
2009-10-15 09:17:48
+4
A:
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.
Can we have a bit more detail?
Bobby Jack
2008-09-11 16:18:15
+4
A:
If you set the border-collapse property to collapse, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want
CSS:
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
Example HTML Document:
<html>
<head>
<title>Border-collapse Test</title>
<style type="text/css">
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
</style>
</head>
</body>
<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>
</body>
</html>
rpetrich
2008-09-11 16:44:26
I'm not sure this should be the accepted answer since, as the poster points out, it has other side-effects, which may well be undesirable. It's also not true, at least as far as I can verify. Can you post a link to a working example?
Bobby Jack
2008-09-14 12:54:18
I've added an example HTML document that shows the border showing even on blank cells. Tested in IE7, fx3 and the latest safari. The main side-effect of border-collapse is you can't have double borders that look decent. Also, missing cells can't be styled no matter how hard you try
rpetrich
2008-09-15 07:09:23
A:
"IE" isn't a useful term in this context anymore now that IE8 is out.
IE7 always does "empty-cells:show" (or so I'm told ... Vista). IE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide". IE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.
As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).
+6
A:
Another way of making sure there is data in all cells:
$(document).ready(function() {
$("td:empty").html("  ;");
});
Rasmus
2009-07-29 11:35:38
This works well since you can have it in a separate "ie.js" file for inclusion via conditional comments. In my case I didn't want to change my backend for an IE display bug.
Mathew Byrne
2010-06-04 06:55:45
A:
I'm taking this from another website but:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Use for the CSS for the table and TD element respectively.
Sofox
2010-03-30 16:24:20
A:
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and 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.
Crystal Jones
2010-08-31 20:46:19
A:
the solution from wbkang works great for me. just add <span></span> inside the cell.