background color of table cells using css and html -


i've coded table want : , odd rows have different colors , first row , column have same color ; used colgroup coloring first column doesn't work.

<!doctype html> <html> <head>     <meta charset="utf-8">     <title>untitled document</title>      <style type="text/css">         tr.odd{background-color:#f9f;}         tr.even{background-color:#fcf;}     </style>  </head>  <body>     <table width="200" border="1">         <colgroup span="1" style="background:purple;"></colgroup>          <tr style="background:purple;">             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>         </tr>         <tr class="odd">             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>         </tr>         <tr class="even">             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>         </tr>         <tr class="odd">             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>             <td>&nbsp;</td>         </tr>     </table>  </body> </html> 

maybe wanted.

css

table tr td:first-of-type {background-color: purple !important;} 

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>untitled document</title>  <style type="text/css">  tr.odd{background-color:#f9f;}  tr.even{background-color:#fcf;}  table tr td:first-of-type {background-color: purple !important;}  </style>  </head>    <body>  <table width="200" border="1">  <colgroup span="1" style="background:purple;"></colgroup>      <tr style="background:purple;">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr class="odd">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr class="even">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr class="odd">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>  </table>    </body>  </html>


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -