Pure.CSS Horizontal bordered table

by Online Tutorials Library July 14, 2022

Tables with Horizontal Borders

If you want only horizontal lines in your table, add the pure-table-horizontal classname to the <table> element. It will create a table having horizontal lines only.

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 pure-table-horizontal”>     <thead>         <tr>             <th>Roll no.</th>             <th>Name</th>             <th>Age</th>             <th>Grade</th>         </tr>     </thead>      <tbody>         <tr>             <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>             <td>3</td>             <td>Ariana</td>             <td>20</td>             <td>C</td>         </tr>     </tbody> </table> </html> 

Test it Now

Output:

PureCSS tables 3

Next TopicPure.CSS Stripped Table

Pure.CSS Horizontal bordered table

Tables with Horizontal Borders

Asserts in Postman

Python Wand library

You may also like