table styles - how can i implement style on just 1 table.

Discussion in 'CSS' started by lazynewt, Jul 21, 2008.

  1. #1
    I am using this css styling for a particular table in a div.

    /* 
    	table properties
    */
    table {
      border-collapse: collapse;
      border: 1px solid #03476F;
      font: normal 11px verdana, arial, helvetica, sans-serif;
      color: #363636;
      background: #92C428;
      }
    caption {
      text-align: center;
      font: bold 18px arial, helvetica, sans-serif;
      background: transparent;
      padding:6px 4px 8px 0px;
      color: #03476F;
      text-transform: uppercase;
      }
    td, th {
      border: 1px dotted #03476F;
      padding: .4em;
      color: #363636;
      }
    
    thead th, tfoot th {
      font: bold 11px verdana, arial, helvetica, sans-serif;
      border: 1px solid #03476F;;
      text-align: left;
      background: #4591AD;
      color: #FFFFFF;
      padding-top:3px;
      }
    tbody td a {
      background: transparent;
      text-decoration: none;
      color: #363636;
      }
    tbody td a:hover {
      background: #C2F64D;
      color: #363636;
      }
    tbody th a {
      font: normal 11px verdana, arial, helvetica, sans-serif;
      background: transparent;
      text-decoration: none;
      font-weight:normal;
      color: #363636;
      }
    tbody th a:hover {
      background: transparent;
      color: #363636;
      }
    tbody th, tbody td {
      vertical-align: top;
      text-align: left;
      }
    tfoot td {
      border: 1px solid #03476F;
      background: #4591AD;
      padding-top:3px;
      color: #FFFFFF;
      }
    .odd {
      background: #AEE239;
      }
    tbody tr:hover {
      background: #FFD800;
      border: 1px solid #03476F;
      color: #FFFFFF;
      }
    tbody tr:hover th,
    tbody tr.odd:hover th {
      background: #FFD800;
      color: #FFFFFF;
      }
    Code (markup):
    Obviously this will apply to EVERY table even layout ones on my page. What i want to do is ONLY use this css style for a specific table that is going to be used to compare things. Im pretty sure i need to assign it a class e.g
    compare.table
    Code (markup):
    or something but not sure how i would go about doing this....

    thanks in advance for any help.
     
    lazynewt, Jul 21, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well now, you did say that this table was in a div. Does this div have a name? Is there only one table in that div? If so, you have several options:

    Stick and id or a class on the div, and style the table accordingly:
    <div id="tablewrapper">

    #tablewrapper table {
    styles;
    }

    If this same div has more tables in it though, then just give your particular table the class or id.
    If it's a really special table and there really is only one of them (per page), then give it an id.

    <table id="supercooltable">

    #supercooltable {
    table styles;
    }

    #supercooltable th, td {
    styles;
    }
    #supercooltable tfoot {
    styles;
    }

    etc
     
    Stomme poes, Jul 21, 2008 IP