Pure.CSS Stripped Table

by Online Tutorials Library July 14, 2022

Pure.CSS Stripped Tables

If the table is large, it would better to make it stripped. The stripped table is more visible and attractive for the users. You have to add “pure-table-odd” class name to every other <tr> element to change the background of the row and creates a zebra-styled effect.

Note: In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The pure-table-striped classname can be added to the <table> element and the zebra-styled striping will happen automatically. This approach will not work in Internet Explorer 8 or lower.

Example:

 <!DOCTYPE html> <html> <link rel=”stylesheet”  href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”  integrity=”sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w”  crossorigin=”anonymous”>  <table class=”pure-table”>     <thead>         <tr>             <th>Roll no.</th>             <th>Name</th>             <th>Age</th>             <th>Grade</th>         </tr>     </thead>      <tbody>        <tr class=”pure-table-odd”>             <td>1</td>             <td>Rahul</td>             <td>22</td>             <td>A</td>         </tr>          <tr>             <td>2</td>             <td>Rishi</td>             <td>21</td>             <td>A</td>         </tr>          <tr class=”pure-table-odd”>             <td>3</td>             <td>Ariana</td>             <td>20</td>             <td>C</td>         </tr>                  <tr>             <td>4</td>             <td>Tony</td>             <td>21</td>             <td>A</td>         </tr>                  <tr class=”pure-table-odd”>             <td>5</td>             <td>Piyush</td>             <td>18</td>             <td>A</td>         </tr>                 <tr>             <td>6</td>             <td>Lucky</td>             <td>23</td>             <td>B</td>         </tr>     </tbody> </table> </html> 

Test it Now

Output:

PureCSS tables 4

Next TopicPure.CSS Interview Questions

Pure.CSS Stripped Table

Pure.CSS Stripped Tables

Note: In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The pure-table-striped classname can be added to the <table> element and the zebra-styled striping will happen automatically. This approach will not work in Internet Explorer 8 or lower.

Asserts in Postman

Python Wand library

You may also like