Zebra-stripe table only if it has more than 2 rows - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

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

Description

Zebra-stripe table only if it has more than 2 rows

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
body {<!--   w w  w.jav  a  2s.  com-->
   display:flex;
}

hr {
   color:Chartreuse;
}

table {
   margin:0 2em;
}

table tr.clickable:nth-child(odd) {
   background:yellow;
   color:blue;
}

table tr.clickable:nth-child(even) {
   background:pink;
}

table tr.clickable:nth-child(odd):first-child:last-child,
table tr.clickable:nth-child(odd):first-child +  tr.clickable:nth-child(even):last-child,
table tr.clickable:nth-child(odd):first-child:nth-last-child(2) {
   background:none;
   color:OrangeRed;
}
</style> 
 </head> 
 <body translate="no">
   Lorem ipsum dolor si 
  <div class="select"> 
   <table> 
    <tbody> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
  <hr>Lorem ipsum dolor si 
  <div class="select"> 
   <table> 
    <tbody> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem</td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
  <hr>Lorem ipsum dolor sit amet, consectetur adip 
  <div class="select"> 
   <table> 
    <tbody> 
     <tr class="clickable"> 
      <td>Lorem </td> 
     </tr> 
     <tr class="clickable"> 
      <td>Lorem </td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
  <hr>Lorem ipsum dolor sit amet, consectetur adipiscing el 
  <div class="select"> 
   <table> 
    <tbody> 
     <tr class="clickable"> 
      <td>Lorem </td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials