Wednesday

CSS table row coloring >> tr:nth-child get 2nd, 3rd, 6th and 7th children at once?














<html>
           <head>
                   <style>
                         caption {
                                text-align: center;
                           }
                            tr:nth-child(4n+1):not(:first-child), tr:nth-child(4n) {
                                  background: #EAEAEA;
                             }
                             tr:nth-child(4n-1), tr:nth-child(4n-2) {
                                 background: #E7F2FC;
                            }
                            </style>
                </head>
               
    <body topmargin=0 leftmargin=0>
      <table >
        <caption><b><br>HEADER</b></caption>
        <tr>
          <td height="21"><b>column 1</b></td>
          <td height="21"><b>column 2</b></td>
          <td height="21"><b>column 3</b></td>
          <td height="21"><b>column 4</b></td>
        </tr>
        <tr>
          <td>row 1.1</td>
          <td>row 1.2</td>
          <td>row 1.3</td>
          <td>row 1.4</td>
        </tr>
        <tr>
          <td colspan="4">row 2</td>
        </tr>
        <tr>
          <td>row 3.1</td>
          <td>row 4.2</td>
          <td>row 4.3</td>
          <td>row 4.4</td>
        </tr>
        <tr>
          <td colspan="4">row 4</td>
        </tr>
        <tr>
          <td>row 5.1</td>
          <td>row 5.2</td>
          <td>row 5.3</td>
          <td>row 5.4</td>
        </tr>
        <tr>
          <td colspan="4">row 6</td>
        </tr>
      </table>
     </body>
</html>

No comments:

Post a Comment