Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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>
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-dark">
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table head options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead class="thead-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>
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-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>
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table 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>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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped table-dark">
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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>
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered table-dark">
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Borderless table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-borderless">
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless can also be used on dark tables.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-borderless table-dark">
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Hoverable rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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>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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover table-dark">
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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>
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-sm table-dark">
<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>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Contextual classes
Use contextual classes to color table rows or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Active | Cell | Cell |
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
| # | Heading | Heading |
|---|---|---|
| 1 | Cell | Cell |
| 2 | Cell | Cell |
| 3 | Cell | Cell |
| 4 | Cell | Cell |
| 5 | Cell | Cell |
| 6 | Cell | Cell |
| 7 | Cell | Cell |
| 8 | Cell | Cell |
| 9 | Cell | Cell |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.sr-onlyclass.
Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
Note
Note that since browsers do not currently support range context queries , we work around the limitations of
min-andmax-prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Captions
A <caption> 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.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<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>
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
</table>
</div>
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm">
<table class="table">
</table>
</div>
<div class="table-responsive-md">
<table class="table">
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
</table>
</div>
MyTravel examples
| # | Client | Amount | Date | Status |
|---|---|---|---|---|
Monica
|
$9.00 | 05 May | Rejected | |
Jacob
|
$257.93 | 12 May | Completed | |
Conor
|
$441.99 | 15 May | Completed | |
Victoria
|
$84.01 | 27 May | Pending |
<table class="table table-light">
<thead>
<tr>
<th scope="col" style="width: 8%;">#</th>
<th scope="col">Client</th>
<th scope="col">Amount</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
<span class="btn-icon__inner font-weight-medium">1</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
</span>
<span>Monica</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 May</td>
<td class="align-middle">
<span class="badge badge-danger">Rejected</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
<span class="btn-icon__inner font-weight-medium">2</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description">
</span>
<span>Jacob</span>
</div>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-secondary">12 May</td>
<td class="align-middle">
<span class="badge badge-success">Completed</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
<span class="btn-icon__inner font-weight-medium">3</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img8.jpg" alt="Image Description">
</span>
<span>Conor</span>
</div>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-secondary">15 May</td>
<td class="align-middle">
<span class="badge badge-success">Completed</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
<span class="btn-icon__inner font-weight-medium">3</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
</span>
<span>Victoria</span>
</div>
</td>
<td class="align-middle text-primary">$84.01</td>
<td class="align-middle text-secondary">27 May</td>
<td class="align-middle">
<span class="badge badge-warning">Pending</span>
</td>
</tr>
</tbody>
</table>
<table class="table table-light">
<thead>
<tr>
<th scope="col">Event</th>
<th scope="col">Date</th>
<th scope="col">Location</th>
<th scope="col">Seats</th>
<th scope="col">Attending</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox01">
<label class="custom-control-label" for="eventCheckbox01">Webinar</label>
</div>
</th>
<td class="align-middle text-secondary">
<small class="d-block">25 Aug, 2018</small>
<small class="d-block">12PM - 01AM</small>
</td>
<td class="align-middle text-secondary">
<small class="d-block">728 Dooley Branch,<br>Beckershire, LA 63598-2909</small>
</td>
<td class="align-middle text-secondary small">
<span class="fas fa-chair mr-2"></span>
98 of 200
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
<span class="fas fa-check btn-icon__inner"></span>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
<span class="fas fa-times btn-icon__inner"></span>
</button>
</td>
<td class="align-middle text-secondary">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<span class="fas fa-pen btn-icon__inner"></span>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox02" checked>
<label class="custom-control-label" for="eventCheckbox02">Slack conference</label>
</div>
</th>
<td class="align-middle text-secondary">
<small class="d-block">31 Aug, 2018</small>
<small class="d-block">06AM - 06:30AM</small>
</td>
<td class="align-middle text-secondary">
<small class="d-block">622 Dixie Path,<br>South Tobinchester, UT 98336</small>
</td>
<td class="align-middle text-secondary small">
<span class="fas fa-chair mr-2"></span>
7 of 20
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-primary">
<span class="fas fa-check btn-icon__inner"></span>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
<span class="fas fa-times btn-icon__inner"></span>
</button>
</td>
<td class="align-middle text-secondary">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<span class="fas fa-pen btn-icon__inner"></span>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox03" checked>
<label class="custom-control-label" for="eventCheckbox03">Dropbox</label>
</div>
</th>
<td class="align-middle text-secondary">
<small class="d-block">04 Sep, 2018</small>
<small class="d-block">03PM - 05AM</small>
</td>
<td class="align-middle text-secondary">
<small class="d-block">153 Williamson Plaza,<br>Maggieberg, MT 09514</small>
</td>
<td class="align-middle text-secondary small">
<span class="fas fa-chair mr-2"></span>
41 of 74
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-primary">
<span class="fas fa-check btn-icon__inner"></span>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
<span class="fas fa-times btn-icon__inner"></span>
</button>
</td>
<td class="align-middle text-secondary">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<span class="fas fa-pen btn-icon__inner"></span>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox04">
<label class="custom-control-label" for="eventCheckbox04">InVision live</label>
</div>
</th>
<td class="align-middle text-secondary">
<small class="d-block">11 Sep, 2018</small>
<small class="d-block">02PM - 03AM</small>
</td>
<td class="align-middle text-secondary">
<small class="d-block">5078 Jensen Key,<br>Port Kaya, WV 73505</small>
</td>
<td class="align-middle text-secondary small">
<span class="fas fa-chair mr-2"></span>
55 of 155
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
<span class="fas fa-check btn-icon__inner"></span>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
<span class="fas fa-times btn-icon__inner"></span>
</button>
</td>
<td class="align-middle text-secondary">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<span class="fas fa-pen btn-icon__inner"></span>
</a>
</td>
</tr>
</tbody>
</table>
| Task | Project | Priority | Due date | Status |
|---|---|---|---|---|
| Home page redesign | Spotify | Highest | 25 Jul | In progress |
| Logo branding | Dropbox | Medium | 12 Aug | In progress |
| Website redesign | High | 15 Aug | Completed | |
| Home page redesign | MyTravel App | Medium | 01 Aug | Completed |
| SEO optimization | Slack | Lowest | 02 Aug | On hold |
| Branding | Spotify | High | 05 Sep | In progress |
| Logo redesign | Htmlstream | High | 15 Sep | Completed |
| Website redesign | GitHub | Low | 16 Sep | On hold |
<table class="table table-light">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Project</th>
<th scope="col">Priority</th>
<th scope="col">Due date</th>
<th scope="col">Status</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td class="align-middle font-weight-normal">Home page redesign</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<span class="fas fa-arrow-up mr-1"></span>
Highest
</td>
<td class="align-middle">25 Jul</td>
<td class="align-middle">
<span class="fas fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Logo branding</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-warning">
<span class="fas fa-arrow-up mr-1"></span>
Medium
</td>
<td class="align-middle">12 Aug</td>
<td class="align-middle">
<span class="fas fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Website redesign</td>
<td class="align-middle">Google</td>
<td class="align-middle text-danger">
<span class="fas fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">15 Aug</td>
<td class="align-middle">
<span class="fas fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Home page redesign</td>
<td class="align-middle">MyTravelApp</td>
<td class="align-middle text-warning">
<span class="fas fa-arrow-up mr-1"></span>
Medium
</td>
<td class="align-middle">01 Aug</td>
<td class="align-middle">
<span class="fas fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">SEO optimization</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-success">
<span class="fas fa-arrow-down mr-1"></span>
Lowest
</td>
<td class="align-middle">02 Aug</td>
<td class="align-middle">
<span class="fas fa-circle text-warning small mr-1"></span>
On hold
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Branding</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<span class="fas fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">05 Sep</td>
<td class="align-middle">
<span class="fas fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Logo redesign</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-danger">
<span class="fas fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">15 Sep</td>
<td class="align-middle">
<span class="fas fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Website redesign</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-success">
<span class="fas fa-arrow-down mr-1"></span>
Low
</td>
<td class="align-middle">16 Sep</td>
<td class="align-middle">
<span class="fas fa-circle text-warning small mr-1"></span>
On hold
</td>
</tr>
</tbody>
</table>