codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Make your Tables look stylish with zebra stripes using CSS

    27th February 2019

    CSS

    Css - Codehaven

    Just find your table, and add the id of “zebra’ to it.
    Then cut and paste the code and voila!

    1
    2
    3
    4
    5
    6
    7
    8
     
    <table border=1 id='zebra'>
      <tr>
       <th>Heading</th>
       <td>Dog></td>
      </tr>
    </table>
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    <style>
    #zebra {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
     
    #zebra td, #zebra th {
      border: 1px solid #ddd;
      padding: 8px;
    }
     
    #zebra tr:nth-child(even){background-color: #f2f2f2;}
     
    #zebra tr:hover {background-color: #ddd;}
     
    #zebra th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }
    </style>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN