Bootstrap class: .table-bordered
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>Preview
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
Check .table-bordered in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
Tips 💡
You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.
Sass source
/* _print.scss:116 */
.table-bordered {
th,
td {
border: 1px solid $gray-300 !important;
}
}
/* _tables.scss:48 */
.table-bordered {
border: $table-border-width solid $table-border-color;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
}
}
}Uses variables
Code copied to the clipboard.
Copying failed
/* _print.scss:116 */
$gray-300
/* _tables.scss:48 */
$table-border-width
$table-border-color
$table-border-width
$table-border-color
$table-border-width
