border-collapse: collapse & border-bottom

[tinfanide]

First, I wonder why

"border-bottom: 1px solid #ccc" should go with "border-collapse: collapse" in order to come into effect.

 

Second, it is not compatible across all browsers to the best I know (only IE8+, Chrome support).

In FF or IE7-, the bordor-bottom does not come out.

 

The test page:

http://learntolive.x10.mx/HTML/table.html

[Ingolme]

The <tr> element may not accept certain styling in some browsers, try setting the bottom border of the <td> elements instead.

 

border-collapse is supported by pretty much all browsers, as far as I can remember.

[tinfanide]

<style type="text/css">table{	border-collapse: collapse;}table th{	text-align: left;	}td {        border-bottom: 1px solid #F00;}table th, table td{	padding: 5px 10px;	}</style>

Yes, change from <tr> to <td>. That's one thing.

Another thing is that "table border-collapse: collapse" does inhibit border-bottom in TABLE. (in FF)

Edited August 6, 2013 by Tin