CSS to make an empty cell's border appear?

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

IE 7 specifically.

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

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

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

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>

The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:

Try adding these two attributes to the table element: frame="box" rules="all" like this:

<table border="1" cellspacing="0" frame="box" rules="all">

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

empty-cells: show

CSS to make an empty cell's border appear?

Related

Recent Posts