rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add visual test for tables

Browse Source
This commit is contained in:
Louis-Maxime Piton 2024-10-09 15:45:00 +02:00
parent 51e1a29a51
commit b16951fe95
1 changed files with 1605 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1605
js/tests/visual/table.html Normal file
View File

@ -0,0 +1,1605 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
<title>Form</title>
<style></style>
</head>
<body>
<main class="container py-5">
<div class="row gy-4 gx-5">
<h1 class="mt-5">Table variants</h1>
<div class="col-3">
<table class="table table-hover table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="table-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="table-primary">Mark</td>
<td class="table-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="table-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="table-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="table-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="table-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="table-primary">Mark</td>
<td class="table-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="table-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="table-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="table-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-success">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="table-warning">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td class="table-danger">@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-warning table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td class="table-warning">@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-success">
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td class="table-success">@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="table-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td class="table-success">@getbootstrap</td>
</tr>
<tr class="table-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="table-primary">Mark</td>
<td class="table-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="table-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="table-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="table-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row gy-4 gx-5">
<h1 class="mt-5">bg + text utilities</h1>
<div class="col-3">
<table class="table table-hover text-bg-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="text-bg-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="text-bg-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="text-bg-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="text-bg-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="text-bg-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="text-bg-primary">Mark</td>
<td class="text-bg-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="text-bg-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-bg-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-bg-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="text-bg-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped text-bg-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="text-bg-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="text-bg-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="text-bg-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="text-bg-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="text-bg-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="text-bg-primary">Mark</td>
<td class="text-bg-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="text-bg-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-bg-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-bg-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="text-bg-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped text-bg-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="text-bg-success">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="text-bg-warning">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td class="text-bg-danger">@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="text-bg-warning table-active">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="text-bg-primary">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="text-bg-success">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td class="text-bg-warning">@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr class="text-bg-success">
<td class="table-active" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="text-bg-primary">
<th scope="row">1</th>
<td>Mark</td>
<td class="table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="text-bg-primary table-active">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td class="text-bg-success">@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr class="text-bg-primary">
<th scope="row">4</th>
<td>Bootstrap</td>
<td>Twitter</td>
<td class="text-bg-success">@getbootstrap</td>
</tr>
<tr class="text-bg-primary">
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="text-bg-primary">Mark</td>
<td class="text-bg-primary table-active">Otto</td>
<td class="table-active">@mdo</td>
</tr>
<tr class="table-active">
<th scope="row">2</th>
<td class="text-bg-primary">Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-bg-primary" colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-bg-primary">Bootstrap</td>
<td>Twitter</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td class="text-bg-primary" colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script src="../../../dist/js/bootstrap.bundle.js"></script>
</body>
</html>