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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why does this happen?

    The first table, with the MyBorder class, behaves as expected, but the second table, with no class, inherits some of the MyBorder class styles.
    What am I doing wrong?

    <html>
    <head>
    <title>Table Border Test</title>
    <style>
    table.MyBorder {border-collapse:collapse;}
    table.MyBorder th,td {padding:0 1ex; margin:-2;}
    table.MyBorder thead th,td {border:2px solid Black;}
    table.MyBorder tbody th,td {border:1px dotted Black;}
    </style>
    </head>

    <body>
    <h3>Test</h3>
    <table class="MyBorder">
    <thead>
    <tr>
    <th>One</th><th>Two</th><th>Three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>OneOne</td><td>OneTwo</td><td>OneThree</td>
    </tr><tr>
    <td>TwoOne</td><td>TwoTwo</td><td>TwoThree</td>
    </tr><tr>
    <td>ThreeOne</td><td>ThreeTwo</td><td>ThreeThree</td>
    </tr>
    </tbody>
    </table>
    <hr>
    <table>
    <thead>
    <tr>
    <th>One</th><th>Two</th><th>Three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>OneOne</td><td>OneTwo</td><td>OneThree</td>
    </tr><tr>
    <td>TwoOne</td><td>TwoTwo</td><td>TwoThree</td>
    </tr><tr>
    <td>ThreeOne</td><td>ThreeTwo</td><td>ThreeThree</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Code:
    table.MyBorder {border-collapse:collapse;}
    table.MyBorder th,td {padding:0 1ex; margin:-2;}
    table.MyBorder thead th,td {border:2px solid Black;}
    table.MyBorder tbody th,td {border:1px dotted Black;}
    is the same as

    Code:
    table.MyBorder {border-collapse:collapse;}
    table.MyBorder th {padding:0 1ex; margin:-2;}
    td {padding:0 1ex; margin:-2;}
    table.MyBorder thead th {border:2px solid Black;}
    td {border:2px solid Black;}
    table.MyBorder tbody th {border:1px dotted Black;}
    td {border:1px dotted Black;}
    what you probably intended is

    Code:
    table.MyBorder {border-collapse:collapse;}
    table.MyBorder th, table.MyBorder td {padding:0 1ex; margin:-2;}
    table.MyBorder thead th, table.MyBorder td {border:2px solid Black;}
    table.MyBorder tbody th, table.MyBorder td {border:1px dotted Black;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    VicSowers (07-30-2014)

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes! Thank you, thank you,thank you.


  •  

    Posting Permissions

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