css - Why does IE table-cell displays only when it has content? -

css - Why does IE table-cell displays only when it has content? -

this html

<table class = "contact-table"> <tr> <th>first name(*):</th> <td> <asp:label id="lblfirstname" runat="server" ></asp:label> </td> </tr> <tr> <th>middle name</th> <td> <asp:label id="lblmiddlename" runat="server" ></asp:label> </td> </tr> <tr> <th>last name(*):</th> <td> <asp:label id="lbllastname" runat="server" ></asp:label> </td> </tr> </table>

and css

.contact-table th, .contact-table td { border: 1px black solid; }

for ff , chrome, things working perfectly, i.e. th , td have 1px black border around. however, ie, td have content have border.

any reason that?

edit

when add together .contact-table td span

.contact-table th, .contact-table td, .contact-table td span { border: 1px black solid; }

the empty cells have border in ie, cells had border before, have border within cells.

edit

when alter rules way

.contact-table th, .contact-table td span { border: 1px black solid; } .contact-table td span { width: 100%; }

it working ie, ff , chrome display little border wrap text.

is there way tell css apply different rules depending on browser?

do have empty-cells: show set?

see: http://msdn.microsoft.com/de-de/library/ie/cc848860(v=vs.85).aspx

css internet-explorer border