1508 lines
93 KiB
HTML
1508 lines
93 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Table - Mazer Admin Dashboard</title>
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/bootstrap.css">
|
||
|
||
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
|
||
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="assets/css/app.css">
|
||
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<div id="sidebar" class="active">
|
||
<div class="sidebar-wrapper active">
|
||
<div class="sidebar-header">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="logo">
|
||
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
|
||
</div>
|
||
<div class="toggler">
|
||
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-menu">
|
||
<ul class="menu">
|
||
<li class="sidebar-title">Menu</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="index.html" class='sidebar-link'>
|
||
<i class="bi bi-grid-fill"></i>
|
||
<span>Dashboard</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-stack"></i>
|
||
<span>Components</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="component-alert.html">Alert</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-badge.html">Badge</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-button.html">Button</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-card.html">Card</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-carousel.html">Carousel</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-dropdown.html">Dropdown</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-list-group.html">List Group</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-modal.html">Modal</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-navs.html">Navs</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-pagination.html">Pagination</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-progress.html">Progress</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-spinner.html">Spinner</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="component-tooltip.html">Tooltip</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-collection-fill"></i>
|
||
<span>Extra Components</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="extra-component-avatar.html">Avatar</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="extra-component-sweetalert.html">Sweet Alert</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="extra-component-toastify.html">Toastify</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="extra-component-rating.html">Rating</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="extra-component-divider.html">Divider</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-grid-1x2-fill"></i>
|
||
<span>Layouts</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="layout-default.html">Default Layout</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="layout-vertical-1-column.html">1 Column</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="layout-horizontal.html">Horizontal Menu</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-title">Forms & Tables</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-hexagon-fill"></i>
|
||
<span>Form Elements</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="form-element-input.html">Input</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-element-input-group.html">Input Group</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-element-select.html">Select</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-element-radio.html">Radio</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-element-checkbox.html">Checkbox</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-element-textarea.html">Textarea</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="form-layout.html" class='sidebar-link'>
|
||
<i class="bi bi-file-earmark-medical-fill"></i>
|
||
<span>Form Layout</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-pen-fill"></i>
|
||
<span>Form Editor</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="form-editor-quill.html">Quill</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-editor-ckeditor.html">CKEditor</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-editor-summernote.html">Summernote</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="form-editor-tinymce.html">TinyMCE</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item active ">
|
||
<a href="table.html" class='sidebar-link'>
|
||
<i class="bi bi-grid-1x2-fill"></i>
|
||
<span>Table</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="table-datatable.html" class='sidebar-link'>
|
||
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
|
||
<span>Datatable</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-title">Extra UI</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-pentagon-fill"></i>
|
||
<span>Widgets</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="ui-widgets-chatbox.html">Chatbox</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-widgets-pricing.html">Pricing</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-widgets-todolist.html">To-do List</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-egg-fill"></i>
|
||
<span>Icons</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-icons-fontawesome.html">Fontawesome</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-icons-dripicons.html">Dripicons</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-bar-chart-fill"></i>
|
||
<span>Charts</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="ui-chart-chartjs.html">ChartJS</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-chart-apexcharts.html">Apexcharts</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="ui-file-uploader.html" class='sidebar-link'>
|
||
<i class="bi bi-cloud-arrow-up-fill"></i>
|
||
<span>File Uploader</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-map-fill"></i>
|
||
<span>Maps</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="ui-map-google-map.html">Google Map</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-title">Pages</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="application-email.html" class='sidebar-link'>
|
||
<i class="bi bi-envelope-fill"></i>
|
||
<span>Email Application</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="application-chat.html" class='sidebar-link'>
|
||
<i class="bi bi-chat-dots-fill"></i>
|
||
<span>Chat Application</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="application-gallery.html" class='sidebar-link'>
|
||
<i class="bi bi-image-fill"></i>
|
||
<span>Photo Gallery</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="application-checkout.html" class='sidebar-link'>
|
||
<i class="bi bi-basket-fill"></i>
|
||
<span>Checkout Page</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-person-badge-fill"></i>
|
||
<span>Authentication</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="auth-login.html">Login</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="auth-register.html">Register</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="auth-forgot-password.html">Forgot Password</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-item has-sub">
|
||
<a href="#" class='sidebar-link'>
|
||
<i class="bi bi-x-octagon-fill"></i>
|
||
<span>Errors</span>
|
||
</a>
|
||
<ul class="submenu ">
|
||
<li class="submenu-item ">
|
||
<a href="error-403.html">403</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="error-404.html">404</a>
|
||
</li>
|
||
<li class="submenu-item ">
|
||
<a href="error-500.html">500</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="sidebar-title">Raise Support</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
|
||
<i class="bi bi-life-preserver"></i>
|
||
<span>Documentation</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
|
||
<i class="bi bi-puzzle"></i>
|
||
<span>Contribute</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="sidebar-item ">
|
||
<a href="https://github.com/zuramai/mazer#donate" class='sidebar-link'>
|
||
<i class="bi bi-cash"></i>
|
||
<span>Donate</span>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
|
||
</div>
|
||
</div>
|
||
<div id="main">
|
||
<header class="mb-3">
|
||
<a href="#" class="burger-btn d-block d-xl-none">
|
||
<i class="bi bi-justify fs-3"></i>
|
||
</a>
|
||
</header>
|
||
|
||
<div class="page-heading">
|
||
<div class="page-title">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 order-md-1 order-last">
|
||
<h3>Table</h3>
|
||
<p class="text-subtitle text-muted">For user to check they list</p>
|
||
</div>
|
||
<div class="col-12 col-md-6 order-md-2 order-first">
|
||
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">Table</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Basic Tables start -->
|
||
<section class="section">
|
||
<div class="row" id="basic-table">
|
||
<div class="col-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Table with outer spacing</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Using the most basic table up, here’s how
|
||
<code>.table</code>-based tables look in Bootstrap. You can use any example
|
||
of below table for your table and it can be use with any type of bootstrap
|
||
tables.
|
||
</p>
|
||
<!-- Table with outer spacing -->
|
||
<div class="table-responsive">
|
||
<table class="table table-lg">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Table without outer spacing</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Using the most basic table up, here’s how
|
||
<code>.table</code>-based tables look in Bootstrap. You can use any example
|
||
of below table for your table and it can be use with any type of bootstrap
|
||
tables.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Table with no outer spacing -->
|
||
<div class="table-responsive">
|
||
<table class="table mb-0 table-lg">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Basic Tables end -->
|
||
|
||
<!-- Inverse table start -->
|
||
<section class="section">
|
||
<div class="row" id="table-inverse">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Inverse table</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p>You can also invert the colors—with light text on dark backgrounds—with <code
|
||
class="highlighter-rouge">.table-dark</code>.</p>
|
||
</div>
|
||
<!-- table with dark -->
|
||
<div class="table-responsive">
|
||
<table class="table table-dark mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card-body">
|
||
<p>You can also invert the colors—with dark text on light backgrounds—with <code
|
||
class="highlighter-rouge">.table-light</code>.</p>
|
||
</div>
|
||
<!-- table with light -->
|
||
<div class="table-responsive">
|
||
<table class="table table-light mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-white text-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-white text-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-white text-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-white text-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-white text-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Inverse table end -->
|
||
<!-- Table head options start -->
|
||
<section class="section">
|
||
<div class="row" id="table-head">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Table head options</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p>Similar to tables and dark tables, use the modifier classes <code
|
||
class="highlighter-rouge">.thead-light</code> or <code
|
||
class="highlighter-rouge">.thead-dark</code> to
|
||
make <code class="highlighter-rouge"><thead></code>s appear light or
|
||
dark gray.
|
||
</p>
|
||
</div>
|
||
<!-- table head dark -->
|
||
<div class="table-responsive">
|
||
<table class="table mb-0">
|
||
<thead class="thead-dark">
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Table head options end -->
|
||
|
||
<!-- Striped rows start -->
|
||
<section class="section">
|
||
<div class="row" id="table-striped">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Striped rows</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Use <code class="highlighter-rouge">.table-striped</code>
|
||
to add
|
||
zebra-striping to any
|
||
table row within the <code class="highlighter-rouge"><tbody></code>.
|
||
This styling
|
||
doesn't work in IE8
|
||
and below as <code>:nth-child</code> CSS selector isn't supported.</p>
|
||
</div>
|
||
<!-- table striped -->
|
||
<div class="table-responsive">
|
||
<table class="table table-striped mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Striped rows end -->
|
||
|
||
<!-- Striped rows with inverse dark table start -->
|
||
<section class="section">
|
||
<div class="row" id="table-striped-dark">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Striped inverse dark</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Use <code>.table-dark</code> with
|
||
<code>.table-striped</code> to add
|
||
zebra-striping to
|
||
any inverse table row within the <code><tbody></code>. This styling
|
||
doesn't work
|
||
in
|
||
IE8 and below as
|
||
<code>:nth-child</code> CSS selector isn't supported.
|
||
</p>
|
||
</div>
|
||
<!-- table strip dark -->
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-dark mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i class="badge-circle font-medium-1"
|
||
data-feather="mail"></i></a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Striped rows with inverse dark table end -->
|
||
|
||
<!-- Bordered table start -->
|
||
<section class="section">
|
||
<div class="row" id="table-bordered">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Bordered table</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Add <code>.table-bordered</code> for borders on all sides
|
||
of the table
|
||
and
|
||
cells. For
|
||
Inverse Dark Table, add <code>.table-dark</code> along with
|
||
<code>.table-bordered</code>.
|
||
</p>
|
||
</div>
|
||
<!-- table bordered -->
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Bordered table end -->
|
||
|
||
<!-- Borderless table start -->
|
||
<section class="section">
|
||
<div class="row" id="table-borderless">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Borderless Table</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p class="card-text">Add <code>.table-borderless</code> for a table without
|
||
borders. It can
|
||
also
|
||
be used on
|
||
dark tables.</p>
|
||
</div>
|
||
<!-- table with no border -->
|
||
<div class="table-responsive">
|
||
<table class="table table-borderless mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Borderless table end -->
|
||
|
||
<!-- Hoverable rows start -->
|
||
<section class="section">
|
||
<div class="row" id="table-hover-row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Hoverable rows</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover
|
||
state on table
|
||
rows
|
||
within a
|
||
<code class="highlighter-rouge"><tbody></code>.
|
||
</p>
|
||
</div>
|
||
<!-- table hover -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Hoverable rows end -->
|
||
|
||
<!-- Contextual classes start -->
|
||
<section class="section">
|
||
<div class="row" id="table-contexual">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Contextual classes</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p>Use contextual classes to color table rows or individual cells. Read full
|
||
documnetation
|
||
<a href="https://getbootstrap.com/docs/4.3/content/tables/#contextual-classes"
|
||
target="_blank">here.</a>
|
||
</p>
|
||
</div>
|
||
<!-- table contextual / colored -->
|
||
<div class="table-responsive">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>NAME</th>
|
||
<th>RATE</th>
|
||
<th>SKILL</th>
|
||
<th>TYPE</th>
|
||
<th>LOCATION</th>
|
||
<th>ACTION</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table-active">
|
||
<td class="text-bold-500">Michael Right</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">UI/UX</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Taxes</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-primary">
|
||
<td class="text-bold-500">Morgan Vanblum</td>
|
||
<td>$13/hr</td>
|
||
<td class="text-bold-500">Graphic concepts</td>
|
||
<td>Remote</td>
|
||
<td>Shangai,China</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-secondary">
|
||
<td class="text-bold-500">Tiffani Blogz</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-success">
|
||
<td class="text-bold-500">Ashley Boul</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-danger">
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-warning">
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-info">
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-light">
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
<tr class="table-dark">
|
||
<td class="text-bold-500">Mikkey Mice</td>
|
||
<td>$15/hr</td>
|
||
<td class="text-bold-500">Animation</td>
|
||
<td>Remote</td>
|
||
<td>Austin,Texas</td>
|
||
<td><a href="#"><i
|
||
class="badge-circle badge-circle-light-secondary font-medium-1"
|
||
data-feather="mail"></i></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Contextual classes end -->
|
||
|
||
<!-- Responsive tables start -->
|
||
<section class="section">
|
||
<div class="row" id="table-responsive">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Always responsive</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make
|
||
any table
|
||
responsive across all
|
||
viewports by adding <code class="highlighter-rouge">.table-responsive</code>
|
||
class on
|
||
<code class="highlighter-rouge">.table</code>. Or, pick a maximum breakpoint
|
||
with which
|
||
to
|
||
have a responsive
|
||
table up to by adding <code
|
||
class="highlighter-rouge"> .table-responsive{-sm|-md|-lg|-xl}</code>.
|
||
Read full
|
||
documnetation <a
|
||
href="https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables"
|
||
target="_blank">here.</a>
|
||
</p>
|
||
|
||
<div class="alert alert-primary">
|
||
<h4 class="alert-heading">Vertical clipping/truncation</h4>
|
||
<p>Responsive tables make use of <code
|
||
class="highlighter-rouge">overflow-y: hidden</code>,
|
||
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.</p>
|
||
</div>
|
||
</div>
|
||
<!-- table responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">Heading 1</th>
|
||
<th scope="col">Heading 2</th>
|
||
<th scope="col">Heading 3</th>
|
||
<th scope="col">Heading 4</th>
|
||
<th scope="col">Heading 5</th>
|
||
<th scope="col">Heading 6</th>
|
||
<th scope="col">Heading 7</th>
|
||
<th scope="col">Heading 8</th>
|
||
<th scope="col">Heading 9</th>
|
||
<th scope="col">Heading 10</th>
|
||
<th scope="col">Heading 11</th>
|
||
<th scope="col">Heading 12</th>
|
||
<th scope="col">Heading 13</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Michael Right</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Michael Right</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Michael Right</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
<td>Table cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="footer clearfix mb-0 text-muted">
|
||
<div class="float-start">
|
||
<p>2021 © Mazer</p>
|
||
</div>
|
||
<div class="float-end">
|
||
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
|
||
href="http://ahmadsaugi.com">A. Saugi</a></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script src="assets/js/main.js"></script>
|
||
</body>
|
||
|
||
</html> |