<p>What CSS should I use to make a cell's border appear even if the cell is empty?</p>

<p>IE 7 specifically.</p>

[{'answer_id': 57006, 'author': 'Grant', 'author_id': 30, 'author_profile': 'https://Stackoverflow.com/users/30', 'pm_score': 7, 'selected': True, 'text': "<p>If I recall, the cell dosn't exist in some IE's unless it's filled with something...</p>\n\n<p>If you can put a <code>&amp;nbsp;</code> (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?</p>\n\n<p>Apparently, IE8 shows the cells by default, and you have to hide it with <code>empty-cells:hide</code> But it doesn't work at all in IE7 (which hides by default).</p>\n"}, {'answer_id': 57011, 'author': 'fijter', 'author_id': 3215, 'author_profile': 'https://Stackoverflow.com/users/3215', 'pm_score': 2, 'selected': False, 'text': "<p>I guess this can't be done with CSS;\nYou need to put a &amp;nbsp; in every empty cell for the border to show in IE...</p>\n"}, {'answer_id': 57023, 'author': 'Allain Lalonde', 'author_id': 2443, 'author_profile': 'https://Stackoverflow.com/users/2443', 'pm_score': 3, 'selected': False, 'text': "<p>I just found the following. It's standards compliant but it doesn't work in IE. sigh.</p>\n\n<pre><code>empty-cells: show \n</code></pre>\n"}, {'answer_id': 57026, 'author': 'Bobby Jack', 'author_id': 5058, 'author_profile': 'https://Stackoverflow.com/users/5058', 'pm_score': 3, 'selected': False, 'text': '<p>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 - &amp;nbsp;, 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.</p>\n\n<p>Can we have a bit more detail?</p>\n'}, {'answer_id': 57071, 'author': 'rpetrich', 'author_id': 4007, 'author_profile': 'https://Stackoverflow.com/users/4007', 'pm_score': 5, 'selected': False, 'text': '<p>If you set the <code>border-collapse</code> property to <code>collapse</code>, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>td {\r\n  border: 1px solid red;\r\n}\r\ntable {\r\n  border-collapse: collapse;\r\n}\r\n&lt;html&gt; &lt;head&gt; &lt;title&gt;Border-collapse Test&lt;/title&gt; &lt;style type="text/css"&gt; td {\r\n  border: 1px solid red;\r\n}\r\ntable {\r\n  border-collapse: collapse;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;&lt;/td&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n  &lt;/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n    &lt;td&gt;&lt;/td&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n  &lt;/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n    &lt;td&gt;&lt;/td&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n  &lt;/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;test&lt;/td&gt;\r\n    &lt;td&gt;&lt;/td&gt;\r\n    &lt;td /&gt;\r\n  &lt;/tr&gt;\r\n&lt;/table&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 532737, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>"IE" isn\'t a useful term in this context anymore now that IE8 is out.</p>\n\n<p>IE7 always does "empty-cells:show" (or so I\'m told ... Vista).\nIE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide".\nIE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.</p>\n\n<p>As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).</p>\n'}, {'answer_id': 1199608, 'author': 'Rasmus', 'author_id': 25792, 'author_profile': 'https://Stackoverflow.com/users/25792', 'pm_score': 5, 'selected': False, 'text': '<p>Another way of making sure there is data in all cells: </p>\n\n<pre><code>   $(document).ready(function() {\n      $("td:empty").html("&amp;nbsp;");\n    });\n</code></pre>\n'}, {'answer_id': 2546836, 'author': 'Sofox', 'author_id': 232147, 'author_profile': 'https://Stackoverflow.com/users/232147', 'pm_score': 0, 'selected': False, 'text': "<p>I'm taking this from another website but:</p>\n\n<pre><code>.sampletable {\nborder-collapse: collapse;}\n\n.sampleTD {\nempty-cells: show;}\n</code></pre>\n\n<p>Use for the CSS for the table and TD element respectively.</p>\n"}, {'answer_id': 3613100, 'author': 'Crystal Jones', 'author_id': 436358, 'author_profile': 'https://Stackoverflow.com/users/436358', 'pm_score': 1, 'selected': False, 'text': '<p>empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 &amp; 8 were still problematic..</p>\n\n<p>This worked for me in both Firefox 3.6.x, IE 7 &amp; 8, Chrome, and Safari:</p>\n\n<p>==============================</p>\n\n<pre><code>table {\n*border-collapse: collapse;}\n\n.sampleTD {\nempty-cells: show;}\n</code></pre>\n\n<p>==============================</p>\n\n<p>Had to use the * to make sure the table style was only applied to the IE browser.</p>\n'}, {'answer_id': 5172978, 'author': 'renozu', 'author_id': 641885, 'author_profile': 'https://Stackoverflow.com/users/641885', 'pm_score': 5, 'selected': False, 'text': '<p>The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:</p>\n\n<p>Try adding these two attributes to the table element:     <strong>frame="box" rules="all"</strong>\nlike this:</p>\n\n<pre><code>&lt;table border="1" cellspacing="0" frame="box" rules="all"&gt;\n</code></pre>\n'}, {'answer_id': 5574304, 'author': 'Voodoo', 'author_id': 135476, 'author_profile': 'https://Stackoverflow.com/users/135476', 'pm_score': 3, 'selected': False, 'text': "<p>This question's old, but still a top result in Google, so I'll add what I've found:</p>\n\n<p>Simply adding <code>border-collapse: collapse</code> to the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).</p>\n\n<p>Best to avoid the extraneous code of adding an <code>&amp;nbsp;</code> or other spacing element when you can fix with CSS.</p>\n"}, {'answer_id': 6157050, 'author': 'vol7ron', 'author_id': 183181, 'author_profile': 'https://Stackoverflow.com/users/183181', 'pm_score': 3, 'selected': False, 'text': '<p>I happened across this question and haven\'t seen any answers that really addressed the issue.</p>\n\n<p>The problem results because IE7 does not see any internal content for the cell; in programming terms the cell is resulting as a <code>null</code> and like most things, you cannot border a <code>null</code> or perform any action on it.  The browser needs an element/object that has a layout, in order to apply a border/layout.</p>\n\n<p>Even empty <code>&lt;div&gt;&lt;/div&gt;</code> or <code>&lt;span&gt;&lt;/span&gt;</code> do not contain content, thus there is nothing to render, resulting in that <code>null</code> case again.</p>\n\n<p>However, you can trick the browser into thinking the cell has content, by giving the empty <code>div/span</code> layout properties.  The easiest way is to apply the CSS style <code>zoom:1</code>.</p>\n\n<pre><code>&lt;table&gt;\n   &lt;tr&gt;&lt;td&gt;Foo&lt;/td&gt;\n       &lt;td&gt;&lt;span style="zoom:1;"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;\n&lt;/table&gt;\n</code></pre>\n\n<hr>\n\n<p>This workaround is better than using a <code>&amp;nbsp;</code>, 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 <code>empty-cell:&lt;show|hide&gt;</code> alternative.</p>\n\n<hr>\n\n<p><em><strong>Note:</em></strong> in lieu of Tomalak\'s comment, it should be understood that hasLayout has nothing to do with <code>null</code>, 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.</p>\n'}, {'answer_id': 6763943, 'author': 'ruruskyi', 'author_id': 372939, 'author_profile': 'https://Stackoverflow.com/users/372939', 'pm_score': 1, 'selected': False, 'text': "<p>Try this if you can't use non-breakable space:</p>\n\n<pre><code>var tn = document.createTextNode('\\ ');\nyourContainer.appendChild(ta);\n</code></pre>\n"}, {'answer_id': 9603027, 'author': 'Brett Haynes', 'author_id': 1254884, 'author_profile': 'https://Stackoverflow.com/users/1254884', 'pm_score': 1, 'selected': False, 'text': '<p>I create a div style that has the same font color as the background of your cell and write anything (usually a "-" "n/a" or "empty") to give the cell content. It shows up if you highlight the page, but when viewed normally looks how you want.</p>\n'}, {'answer_id': 15893230, 'author': 'JT...', 'author_id': 853263, 'author_profile': 'https://Stackoverflow.com/users/853263', 'pm_score': 1, 'selected': False, 'text': '<p>I use a mix of html and css to create cross browser table grids:</p>\n\n<p>html</p>\n\n<p><code>&lt;table cellspacing="1" style="background-color:#000;" border="0"&gt;</code></p>\n\n<p>css</p>\n\n<pre><code>td{background-color:#fff;}\n</code></pre>\n\n<p>I haven\'t seen any issues with any browsers so far.</p>\n'}]
['https://Stackoverflow.com/questions/57002', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2443/']