CSS to make an empty cell's border appear?

Allain_Lalonde_2443 0
Viewed 76691

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

IE 7 specifically.

css
15 Answers

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).

user_300

Another way of making sure there is data in all cells: 

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

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

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>

user_40070

I just found the following. It's standards compliant but it doesn't work in IE. sigh.

empty-cells: show
Allain_Lalonde_24430

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 - &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.

Can we have a bit more detail?

Bobby_Jack_50580

I guess this can't be done with CSS; You need to put a &nbsp; in every empty cell for the border to show in IE...

D4V360_32150

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.

user_12548840

"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).

Admin1
Related