1734 lines
60 KiB
PHP
1734 lines
60 KiB
PHP
@extends('layouts.vertical', ['subtitle' => 'Basic Tables'])
|
||
|
||
@section('content')
|
||
@include('layouts.partials/page-title', ['title' => 'Tables', 'subtitle' => 'Basic Tables'])
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Basic Example
|
||
</h5>
|
||
<p class="card-subtitle">For basic styling—light padding and only
|
||
horizontal dividers—add the base class <code>.table</code> to any
|
||
<code><table></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Variants
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use contextual classes to color tables, table rows or individual cells.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Class</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Default</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
|
||
<tr class="table-primary">
|
||
<td>Primary</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-secondary">
|
||
<td>Secondary</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-success">
|
||
<td>Success</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-danger">
|
||
<td>Danger</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-warning">
|
||
<td>Warning</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-info">
|
||
<td>Info</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-light">
|
||
<td>Light</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr class="table-dark">
|
||
<td>Dark</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped Rows Table
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-striped</code> to add zebra-striping to any table row
|
||
within the <code><tbody></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td> Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped Rows Table Dark
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-dark .table-striped</code> to add zebra-striping to any
|
||
table row
|
||
within the <code><tbody></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-dark table-striped table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td> Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped Rows Table Success
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-success .table-striped</code> to add zebra-striping to any
|
||
table row
|
||
within the <code><tbody></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-success table-striped table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td> Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped columns
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-striped-columns </code>to add zebra-striping to any table
|
||
column.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="table-responsive-sm">
|
||
<table class="table table-striped-columns table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped columns Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-dark .table-striped-columns </code>to add zebra-striping
|
||
to any table column.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive-sm">
|
||
<table class="table table-dark table-striped-columns table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Striped columns Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Use <code>.table-success .table-striped-columns </code>to add
|
||
zebra-striping to any table column.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive-sm">
|
||
<table class="table table-success table-striped-columns table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Hoverable rows
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-hover</code> to enable a hover state on table rows within
|
||
a <code><tbody></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-hover table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Hoverable rows Dark
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-dark .table-hover</code> to enable a hover state on table
|
||
rows within a <code><tbody></code>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-dark table-hover table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Active Tables
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Highlight a table row or cell by adding a <code>.table-active</code> class.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<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-active">
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td class="table-active">Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Active Tables Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Highlight a table row or cell by adding a
|
||
<code>.table-dark .table-active</code> class.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-dark table-centered">
|
||
<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-active">
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td class="table-active">Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Bordered Table
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-bordered</code> for borders on all sides of the table and
|
||
cells.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Bordered color Table
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-bordered</code> & <code>.border-primary</code> can be
|
||
added to change colors.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered border-primary table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Tables without borders
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-borderless</code> for a table without borders..
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-borderless table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Tables without borders Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-borderless</code> <code>.table-dark</code> for a table
|
||
without borders and dark table.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-borderless table-dark table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Small tables
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-sm </code>to make any .table more compact by cutting all
|
||
cell padding in half.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-sm">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Small Tables Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Add <code>.table-sm </code> <code>.table-dark </code>to make any .table
|
||
more compact by cutting all cell padding in half.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-dark table-sm">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Table group dividers
|
||
</h5>
|
||
<p class="card-subtitle"> Add a thicker border, darker between table
|
||
groups—<code><thead></code>, <code><tbody></code>, and
|
||
<code><tfoot></code>—with <code>.table-group-divider</code>.
|
||
Customize the color by changing the <code>border-top-color</code> (which we
|
||
don’t currently provide a utility class for at this time).
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<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-group-divider">
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Vertical alignment
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Table cells of <code><thead></code> are always vertical aligned to
|
||
the bottom. Table cells in <code><tbody></code> inherit their
|
||
alignment from <code><table></code> and are aligned to the top by
|
||
default. Use the <a href="/docs/5.3/utilities/vertical-align/">vertical
|
||
align</a> classes to re-align where needed.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table align-middle table-centered">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" class="w-25">Heading 1</th>
|
||
<th scope="col" class="w-25">Heading 2</th>
|
||
<th scope="col" class="w-25">Heading 3</th>
|
||
<th scope="col" class="w-25">Heading 4</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>This cell inherits
|
||
<code>vertical-align: middle;</code> from the
|
||
table
|
||
</td>
|
||
<td>This cell inherits
|
||
<code>vertical-align: middle;</code> from the
|
||
table
|
||
</td>
|
||
<td>This cell inherits
|
||
<code>vertical-align: middle;</code> from the
|
||
table
|
||
</td>
|
||
<td>This here is some placeholder text, intended to
|
||
take up quite a bit of vertical space, to
|
||
demonstrate how the vertical alignment works in
|
||
the preceding cells.</td>
|
||
</tr>
|
||
<tr class="align-bottom">
|
||
<td>This cell inherits
|
||
<code>vertical-align: bottom;</code> from the
|
||
table row
|
||
</td>
|
||
<td>This cell inherits
|
||
<code>vertical-align: bottom;</code> from the
|
||
table row
|
||
</td>
|
||
<td>This cell inherits
|
||
<code>vertical-align: bottom;</code> from the
|
||
table row
|
||
</td>
|
||
<td>This here is some placeholder text, intended to
|
||
take up quite a bit of vertical space, to
|
||
demonstrate how the vertical alignment works in
|
||
the preceding cells.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>This cell inherits
|
||
<code>vertical-align: middle;</code> from the
|
||
table
|
||
</td>
|
||
<td>This cell inherits
|
||
<code>vertical-align: middle;</code> from the
|
||
table
|
||
</td>
|
||
<td class="align-top">This cell is aligned to the top.
|
||
</td>
|
||
<td>This here is some placeholder text, intended to
|
||
take up quite a bit of vertical space, to
|
||
demonstrate how the vertical alignment works in
|
||
the preceding cells.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Nesting Table
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Border styles, active styles, and table variants are not inherited by
|
||
nested tables.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="4">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Header</th>
|
||
<th scope="col">Header</th>
|
||
<th scope="col">Header</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>A</td>
|
||
<td>First</td>
|
||
<td>Last</td>
|
||
</tr>
|
||
<tr>
|
||
<td>B</td>
|
||
<td>First</td>
|
||
<td>Last</td>
|
||
</tr>
|
||
<tr>
|
||
<td>C</td>
|
||
<td>First</td>
|
||
<td>Last</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Table head
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Similar to tables and dark tables, use the modifier classes
|
||
<code>.table-light</code>to make <code><thead></code>s appear light
|
||
or dark gray.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First</th>
|
||
<th scope="col">Last</th>
|
||
<th scope="col">Handle</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Table head Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Similar to tables and dark tables, use the modifier classes
|
||
<code>.table-dark</code> to make <code><thead></code>s appear light
|
||
or dark gray.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First</th>
|
||
<th scope="col">Last</th>
|
||
<th scope="col">Handle</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Table head Dar
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Similar to tables and dark tables, use the modifier classes
|
||
<code>.table-dark</code> to make <code><thead></code>s appear light
|
||
or dark gray.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Caption
|
||
</h5>
|
||
<p class="card-subtitle">A <code><caption></code> functions like a
|
||
heading for a table. It helps users with screen readers to find a table and
|
||
understand what it’s about and decide if they want to read it.</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-centered">
|
||
<caption>List of users</caption>
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry the Bird</td>
|
||
<td>Simsons</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Caption
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
You can also put the <code><caption></code> on the top of the table
|
||
with <code>.caption-top</code>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table caption-top table-centered">
|
||
<caption>List of users</caption>
|
||
<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>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Always responsive
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Across every breakpoint, use <code>.table-responsive</code> for
|
||
horizontally scrolling tables.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
<th scope="col">Heading</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
With avatars
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
A list of all the users in your account including their name, title, email
|
||
and role.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-hover table-centered">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th scope="col">Name</th>
|
||
<th scope="col">Title</th>
|
||
<th scope="col">Email</th>
|
||
<th scope="col">Role</th>
|
||
<th scope="col">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-2.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0"> Tony M. Carter</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>Designer</td>
|
||
<td>tonymcarter@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-1.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">James E. Chamb</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>UI/UX Designer</td>
|
||
<td>jamesechambliss@teleworm.us</td>
|
||
<td>Admin</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-4.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">Charlotte J. Torres</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>Copywriter</td>
|
||
<td>charlotte@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
|
||
</tr>
|
||
<tr class="table-active">
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-6.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0 d-flex align-items-center gap-1">
|
||
Mary J. Germain<i class='bx bxs-badge-check text-success'></i></iconify-icon>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>Full Stack</td>
|
||
<td>maryjgermain@jourrapide.com</td>
|
||
<td>CEO</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-7.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">Kevin C. Reyes</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>Director of Product</td>
|
||
<td>kevincreyes@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
With checkboxes
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
A list of all the users in your account including their name, title, email
|
||
and role.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-borderless table-centered">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th scope="col">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault5">
|
||
</div>
|
||
</th>
|
||
<th scope="col">Name</th>
|
||
<th scope="col">Title</th>
|
||
<th scope="col">Email</th>
|
||
<th scope="col">Role</th>
|
||
<th scope="col">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault">
|
||
</div>
|
||
</td>
|
||
<td> Tony M. Carter </td>
|
||
<td>Designer</td>
|
||
<td>tonymcarter@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault2">
|
||
</div>
|
||
</td>
|
||
<td>James E. Chamb</td>
|
||
<td>UI/UX Designer</td>
|
||
<td>jamesechambliss@teleworm.us</td>
|
||
<td>Admin</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault3">
|
||
</div>
|
||
</td>
|
||
<td> Charlotte J. Torres </td>
|
||
<td>Copywriter</td>
|
||
<td>charlotte@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault4">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
Mary J. Germain <i class='bx bxs-badge-check text-success'></i></iconify-icon>
|
||
</td>
|
||
<td>Full Stack</td>
|
||
<td>maryjgermain@jourrapide.com</td>
|
||
<td>CEO</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" value=""
|
||
id="flexCheckDefault5">
|
||
</div>
|
||
</td>
|
||
<td>Kevin C. Reyes</td>
|
||
<td>Director of Product</td>
|
||
<td>kevincreyes@jourrapide.com</td>
|
||
<td>Member</td>
|
||
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">
|
||
Nesting Table
|
||
</h5>
|
||
<p class="card-subtitle">
|
||
Border styles, active styles, and table variants are not inherited by
|
||
nested tables.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped table-centered">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Invoice Number</th>
|
||
<th scope="col">Invoice Amount</th>
|
||
<th scope="col">Confirmation by the client</th>
|
||
<th scope="col">Planned payment date</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>F-011221/21</td>
|
||
<td>$ 879.500</td>
|
||
<td>11/05/2023</td>
|
||
<td>12/05/2023</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="4">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">ERP number</th>
|
||
<th scope="col">Carrier legal entity
|
||
</th>
|
||
<th scope="col">Responsible logistician
|
||
</th>
|
||
<th scope="col">Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>3-128-3</td>
|
||
<td>ToBrookfield Asset Management</td>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-7.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">Kevin C.
|
||
Reyes</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span
|
||
class="badge bg-success-subtle text-success py-1 px-2">Verified</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3-128-2</td>
|
||
<td>Brookfield Asset Management</td>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-6.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">Mary J.
|
||
Germain</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge bg-warning-subtle text-warning py-1 px-2">Pending</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3-128-1</td>
|
||
<td>Westfield Asset Management</td>
|
||
<td>
|
||
<div class="d-flex align-items-center gap-1">
|
||
<img src="/images/users/avatar-8.jpg" alt=""
|
||
class="avatar-sm rounded-circle">
|
||
<div class="d-block">
|
||
<h5 class="mb-0">
|
||
Charlotte J. Torres
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge bg-danger-subtle text-danger py-1 px-2">Rejected</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>F-011221/19</td>
|
||
<td>$ 93.250</td>
|
||
<td>9/05/2023</td>
|
||
<td>10/05/2023</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end col -->
|
||
@endsection |