tables: horizontal line between rows

[bryndyment]

Hi,

How can I get a CSS-compliant horizontal rule between table rows. I know there's mention of it in the CSS spec, but it's too obtuse for me. Also, is it well supported in the browsers?

Thanks...

[swmr]

You might try setting a table attribute: rules="rows"

[bryndyment]

Thanks for the reply. I now have "<table id="results" frame="void" rules="rows">", which gets me where I want, except:

1. on IE/Windows, the bar is ugly... how can I get a single-pixel rule? (looks great on Opera, Netscape)

2. how can I control padding above/below this line?

All in a CSS savvy way, of course!

[swmr]

Something like this, maybe:

table{
border-collapse:collapse
}
td{
border-color:#0000ff
}

[me']

How about:

td { border-bottom: 1px solid #000 }

[bryndyment]

After some experimention, the only cross-browser, validating solution I could come up with is:

<style type="text/css">
	td { border-top: 1px solid black; }
</style>

<table cellspacing="0" frame="void" rules="rows">
	<tr><th>ID</th><th>Name</th></tr>
	<tr><td>1</td><td>Laurel</td></tr>
	<tr><td>2</td><td>Hardy</td></tr>
</table>

See http://www.hoologic.com/lines_between_rows/ for more information.