BOOTSTRAP
TABLES
The basic table
structure in Bootstrap takes advantage of almost all the available HTML table
tags. Add the base class .table to any <table
<table
class="table">
All table styles are not inherited in Bootstrap,
meaning any nested tables can be styled independently from the parent.
TABLE CLASS VARIANTS
Use contextual classes to colour tables, table rows or individual cells.
<!-- On tables -->
<table
class="table-primary">...</table>
<table
class="table-secondary">...</table>
<table
class="table-success">...</table>
<table
class="table-danger">...</table>
<table
class="table-warning">...</table>
<table
class="table-info">...</table>
<table
class="table-light">...</table>
<table
class="table-dark">...</table>
<!-- On rows -->
<tr
class="table-primary">...</tr>
<tr
class="table-secondary">...</tr>
<tr
class="table-success">...</tr>
<tr
class="table-danger">...</tr>
<!-- On cells (`td` or `th`) -->
<tr> <td
class="table-primary">...</td>
<td
class="table-secondary">...</td>
<td
class="table-success">...</td>
<td
class="table-danger">...</td>
Table Classes
|
Class-Name |
Description |
Example |
|
table-striped |
to add zebra-striping to any table row within the |
<table class="table table-striped"> |
|
table-striped-columns |
to add zebra-striping to any table column. |
<table class="table table-striped-columns"> |
|
.table-hover |
to
enable a hover state on table rows within a |
<table class="table table-hover"> |
|
table-active |
To
highlight a table row or cell by adding this class. |
<table class="table"> <thead> ... </thead> <tbody><tr class="table-active"> |
|
table-bordered |
To add borders on all sides of the table and cells. |
<table class="table table-bordered"> |
|
table-borderless |
To prepare a table without borders. |
<table class="table table-borderless"> ... |
|
table-sm |
to
make any |
<table class="table table-sm"> |
|
table-hover |
adds
a hover effect (grey background color) on table rows: |
<table class="table table-hover"> |
|
table-dark |
adds a black background to the table |
<table class="table table-dark"> |
|
table-dark and
.table-striped |
to create a dark, striped table |
<table class="table table-dark table-striped"> |
|
table-responsive |
adds a scrollbar to the table when needed |
<div class="table-responsive"> <table class="table"> ... </table></div> |
RESPONSIVE TABLES
Possible
to decide when the table should get a scrollbar, depending on the screen width:
|
Class |
Screen width |
|
.table-responsive-sm |
< 576px |
|
.table-responsive-md |
< 768px |
|
.table-responsive-lg |
< 992px |
|
.table-responsive-xl |
< 1200px |
|
.table-responsive-xxl |
< 1400px |
SAMPLE SCRIPT
<link rel="stylesheet" href="CSS/bootstrap.min.css" />
<script src="JS/bootstrap.min.js"></script>
<script
src="JS/bootstrap.bundle.min.js"></script>
<!doctype html>
<html>
<head>
<title>Navigation Bootstrap</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
</head>
</head>
<body>
<table class="table
table-hover table-danger table-bordered border-primary">
<thead>
<tr class="table-secondary">
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
</html>