sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
375 lines (368 loc) • 11.7 kB
HTML
---
layout: default
title: "Table - Sleek Admin Dashboard Template"
parent: "tables"
sub_parent: "tables"
activePage: "basic-tables"
plugins: ["date_range_picker"]
---
<div class="breadcrumb-wrapper">
<h1>Tables</h1>
{% include breadcrumb.htm %}
</div>
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Basic Table</h2>
</div>
<div class="card-body">
<p class="mb-5">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap <a href="http://getbootstrap.com/docs/4.1/content/tables/"
target="_blank"> more details.</a></p>
<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>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Striped Table</h2>
</div>
<div class="card-body">
<p class="mb-5">Use <code>.table-striped</code> to add zebra-striping to any table row within the <tbody>. Read bootstrap documentation for <a href="http://getbootstrap.com/docs/4.1/content/tables/#striped-rows" target="_blank"> more details.</a></p>
<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>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Bordered Table</h2>
</div>
<div class="card-body">
<p class="mb-5">Add <code>.table-bordered</code> for borders on all sides of the table and cells. Read bootstrap documentation for <a href="http://getbootstrap.com/docs/4.1/content/tables/#bordered-table" target="_blank"> more details.</a></p>
<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 scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Contextual Table</h2>
</div>
<div class="card-body">
<p class="mb-5">Use contextual classes to color table rows or individual cells. Read bootstrap documentation for <a href="http://getbootstrap.com/docs/4.1/content/tables/#contextual-classes" target="_blank"> more details.</a></p>
<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 class="table-secondary">
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr class="table-primary">
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr class="table-info">
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr class="table-success">
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr class="table-danger">
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr class="table-warning">
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Dark Table</h2>
</div>
<div class="card-body">
<p class="mb-5"> You can also invert the colors—with light text on dark backgrounds—with <code>.table-dark</code>. Read bootstrap documentation for <a href="http://getbootstrap.com/docs/4.1/content/tables/#table-head-options" target="_blank"> more details.</a></p>
<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>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Table head options</h2>
</div>
<div class="card-body">
<p class="mb-5">Similar to tables and dark tables, use the modifier classes <code>.thead-light</code> or <code>.thead-dark</code> to make <thead>s appear light or dark gray. Read bootstrap documentation for <a href="http://getbootstrap.com/docs/4.1/content/tables/#table-head-options" target="_blank"> more details.</a></p>
<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>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
{%- include recent-order-table.htm -%}
</div>
</div>