css - How do I create stylesheet for multiple table styles when they can each appear inside each other? -


i have 4 different table styles follows:

table {     margin: 10px;     border: 1px solid rgb(166, 201, 226); }  table th {     background-color:navy;     padding: 4px, 5px;     border: 1px solid rgb(166, 201, 226);     vertical-align: middle; }  table td {     padding: 4px, 5px;     border: 1px solid rgb(166, 201, 226);     vertical-align: middle; }   /* invisible - no borders, no table margin */ table.invisible {     margin: 0px;     border: 0px; }  table.invisible td {     border: 0px;     vertical-align: top; }  /* invisible: middle align */ table.invisible-middlealign {     margin: 0px;     border: 0px; }  table.invisible-middlealign td {     border: 0px; }  /* invisible: middle align - no pad */ table.invisible-middlealignnopad {     margin: 0px;     border: 0px; }  table.invisible-middlealignnopad td {     border: 0px;     padding: 0px; }  /* invisible: no pad */ table.invisible-nopadding {     border: 0px;     margin: 0px; }  table.invisible-nopadding td {     border: 0px;     padding: 0px;     vertical-align:top; } 

sometimes finding example need 'invisible' table inside 'invisible-middlealignnopad' table on occasion 'invisible-middlealignnopad' table needs inside 'invisible' one. given different combinations can have, way have catered doing following:

table.invisible td table.invisible-middlealignnopad td {     border: 0px;     padding: 0px; } 

i have replicate combinations.

i'm guessing there's got better/standard way of handling requirement. appreciate suggestions :)

thanks, neil

could create class add html control these things need "overwritten" speak? example...

css

change above css below... if following css correctly need account times when table should have no margin , no border, when tables td should have no padding , no border, , when td should aligntop or align middle. in below css, can control tables margin , border, td's padding , border , td's vertical alignment adding classes tables appropriately.

basically.. using html classes override things, instead of using complex css selectors override. overrides more granular , controlled html.

table {     margin: 10px;     border: 1px solid rgb(166, 201, 226); }  table th {     background-color:navy;     padding: 4px, 5px;     border: 1px solid rgb(166, 201, 226);     vertical-align: middle; }  table td {     padding: 4px, 5px;     border: 1px solid rgb(166, 201, 226);     vertical-align: middle; }  table.no-margin {     margin: 0px;     border: 0px; }  table.no-padding td {     padding: 0px;     border: 0px; }  table.align-top td {     vertical-align: top; } 

html

<table>    <td>       <table class="no-pad-border">          <td>                      </td>       </table>    </td> </table> 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -