Tables

Table cells padding, width and bottom margin customization options.

<table class="example-table-1"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com"\>www.google.com\</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/"\>magento.com\</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com"\>www.yahoo.com\</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com"\>www.twitter.com\</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table>

.example-table-1 {
    .lib-table();
}