Table Styling with col class should override over td class - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Column

Description

Table Styling with col class should override over td class

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
tr.row_odd td {
   background:Chartreuse;
}

tr.row_even td {
   background:green;
   color:yellow;
}

table {<!--from w ww. j  ava  2s  .c  om-->
   width:100%;
   padding:6px;
}

td {
   padding:6px;
   border:2px solid blue;
}

.col1 {
   background:red !important;
}
</style> 
 </head> 
 <body> 
  <table> 
   <colgroup> 
    <col class="col1"> 
   </colgroup> 
   <tbody> 
    <tr class="row_odd"> 
     <td class="col1">Lore</td> 
     <td>Lore</td> 
    </tr> 
    <tr class="row_even"> 
     <td class="col1">Lore</td> 
     <td>Lore</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials