Question

I have the following css class:

.detail tr td
{
    border-bottom: 1px solid #c0c0c0 ;
}

And it works great in firefox, chrome and IE9.

But IE7 draws a border in the bottom of all the td that have text. But if the td doesn’t have text, then it doesn’t draw the border.

How can I add the border for all of them in IE7?

Answer 1

In IE7, empty tables cells don’t exist. Adding a   to the all your empty cells will solve your issue.

Additional Information:

If you’re using jQuery, you could add the   dynamically:

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

If you hate the idea of inserting a  , you could add a span and set one of it’s properties:

<span style="zoom:1;"></span>

Or with jQuery:

$(document).ready(function() {
    $("td:empty").html("<span style='zoom:1;'></span>");
});