Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tables: horizontal line between rows

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

  • #2
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might try setting a table attribute: rules="rows"
    hmm... ?

  • #3
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this, maybe:

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

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about:
    Code:
    td { border-bottom: 1px solid #000 }
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After some experimention, the only cross-browser, validating solution I could come up with is:
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •