1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Css And Nested Table Problem

Discussion in 'HTML & Website Design' started by kevbo22, Feb 9, 2013.

  1. #1
    I have a table that has a nested table inside. The nested table is inheriting the css style of the parent table. How can I get rid of this styling inheritance so my nested table does not use the gridtable class? Here is the code:

    <style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        width:250px;
    }
    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
    </style>
     
     
    <table class="gridtable">
    <tr>
        <th>Info Header 1</th>
    </tr>
    <tr>
        <td>
        <table>
        <tr>
        <td></td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    HTML:
    Thanks
    SEMrush
     
    kevbo22, Feb 9, 2013 IP
    SEMrush
  2. indyonline

    indyonline Prominent Member

    Messages:
    4,626
    Likes Received:
    248
    Best Answers:
    2
    Trophy Points:
    335
    #2
    give the nested table inside it's own style/class so it don't inherit maybe?

    even if it's only like this
    margin:0;
    padding:0;
    border:0;
     
    Last edited: Feb 9, 2013
    indyonline, Feb 9, 2013 IP
  3. WebPageMistakes

    WebPageMistakes Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    35
    #3
    You need to create additional styles after your original ones like this:
    table.gridtable table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border: none;
    width: auto;
    }
    table.gridtable th table th {
    border: none;
    padding: 8px;
    background-color: transparent;
    }
    table.gridtable td table td {
    border: none;
    padding: 8px;
    background-color: transparent;
    }
    Code (markup):
    Get the idea? You have to undo what you did for the outside table.
     
    Last edited: Feb 10, 2013
    WebPageMistakes, Feb 10, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,326
    Likes Received:
    1,819
    Best Answers:
    244
    Trophy Points:
    515
    #4
    Given the outer table only has one column per TR, why are you even using a table? As a rule of thumb if you are putting a table inside a table, the outer one probably shouldn't even BE a table. You have a H2 and a DIV.

    But without seeing what you are doing for content with these, it's hard to say what the markup should be. Are you REALLY sure all this is tabular data? If not, this isn't 1997 so it doesn't belong in a table.

    Of course that absurdly undersized fixed metric 11px font-size is sending up warning signs too, since that's an accessibility disaster.
     
    deathshadow, Feb 10, 2013 IP
    indyonline likes this.
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,326
    Likes Received:
    1,819
    Best Answers:
    244
    Trophy Points:
    515
    #5
    Oh, the presence of the word 'grid' also raises my hackles... but that's because I consider Grids to be as bad or even worse than tables for layout -- a crutch at best, defeating the entire reason for using HTML and CSS at worst.

    Just saying.
     
    deathshadow, Feb 10, 2013 IP
  6. kevbo22

    kevbo22 Active Member

    Messages:
    149
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #6
    Thanks for all the comments guys. I was not using this table for layout. It is dynamically created with php and the client didnt want it changed. I was never able to get the nested table to style properly so I decided to just redo the nested table with div tags, it worked out. The table I included above was just for reference, it is a far more complex set of tables displaying values, based on a six step wizard. I was able to get everything working without having to get rid of the tables for my client. Thanks for all your help guys.
     
    kevbo22, Feb 10, 2013 IP