mirror of https://github.com/ColorlibHQ/AdminLTE
added support for fixed Table Header (thead th)
- rebuild table scss code to a correct scss/sass code (nesting) - added .table-head-fixed code for default table & dark table - removed unnecessary spaces in Layout.jspull/2143/head
REJack
parent
e5db7c30ac
commit
132d00da32
|
|
@ -178,11 +178,11 @@ const Layout = (($) => {
|
|||
Layout._jQueryInterface.call($('body'))
|
||||
})
|
||||
|
||||
$(Selector.SIDEBAR + ' a').on('focusin', () => {
|
||||
$(Selector.SIDEBAR + ' a').on('focusin', () => {
|
||||
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
|
||||
})
|
||||
|
||||
$(Selector.SIDEBAR + ' a').on('focusout', () => {
|
||||
$(Selector.SIDEBAR + ' a').on('focusout', () => {
|
||||
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -4,43 +4,72 @@
|
|||
*/
|
||||
|
||||
.table {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.table.no-border {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
&:not(.table-dark) {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// .text-center in tables
|
||||
.table.text-center {
|
||||
&, td, th {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table-valign-middle {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body.p-0 .table {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
&:first-of-type {
|
||||
@extend .pl-4;
|
||||
// fixed table head
|
||||
&.table-head-fixed {
|
||||
thead tr:nth-child(1) th {
|
||||
background-color: $white;
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 1px 0 $table-border-color,
|
||||
inset 0 -1px 0 $table-border-color;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
&:last-of-type {
|
||||
@extend .pr-4;
|
||||
|
||||
&.table-dark {
|
||||
thead tr {
|
||||
&:nth-child(1) th {
|
||||
background-color: $table-dark-bg;
|
||||
box-shadow: inset 0 1px 0 $table-dark-border-color,
|
||||
inset 0 -1px 0 $table-dark-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// no border
|
||||
&.no-border {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// .text-center in tables
|
||||
&.text-center {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table-valign-middle {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body.p-0 & {
|
||||
thead > tr > th,
|
||||
thead > tr > td,
|
||||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
&:first-of-type {
|
||||
@extend .pl-4;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@extend .pr-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14581,24 +14581,41 @@ html.maximized-card {
|
|||
* Component: Table
|
||||
* ----------------
|
||||
*/
|
||||
.table {
|
||||
.table:not(.table-dark) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.table.table-head-fixed thead tr:nth-child(1) th {
|
||||
background-color: #ffffff;
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.table.table-head-fixed.table-dark thead tr:nth-child(1) th {
|
||||
background-color: #212529;
|
||||
box-shadow: inset 0 1px 0 #32383e, inset 0 -1px 0 #32383e;
|
||||
}
|
||||
|
||||
.table.no-border,
|
||||
.table.no-border td,
|
||||
.table.no-border th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.table.text-center, .table.text-center td, .table.text-center th {
|
||||
.table.text-center,
|
||||
.table.text-center td,
|
||||
.table.text-center th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-valign-middle thead > tr > th,
|
||||
.table-valign-middle thead > tr > td,
|
||||
.table-valign-middle tbody > tr > th,
|
||||
.table-valign-middle tbody > tr > td {
|
||||
.table .table-valign-middle thead > tr > th,
|
||||
.table .table-valign-middle thead > tr > td,
|
||||
.table .table-valign-middle tbody > tr > th,
|
||||
.table .table-valign-middle tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -314,10 +314,10 @@
|
|||
$(window).on('load', function () {
|
||||
Layout._jQueryInterface.call($('body'));
|
||||
});
|
||||
$(Selector.SIDEBAR + ' a').on('focusin', function () {
|
||||
$(Selector.SIDEBAR + ' a').on('focusin', function () {
|
||||
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
|
||||
});
|
||||
$(Selector.SIDEBAR + ' a').on('focusout', function () {
|
||||
$(Selector.SIDEBAR + ' a').on('focusout', function () {
|
||||
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
|
||||
});
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -567,52 +567,56 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered">
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
|
|
@ -635,52 +639,56 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
|
|
@ -706,52 +714,56 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
|
|
@ -765,52 +777,56 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
|
|
@ -839,48 +855,147 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body table-responsive p-0">
|
||||
<table class="table table-hover">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>User</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>183</td>
|
||||
<td>John Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-success">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>219</td>
|
||||
<td>Alexander Pierce</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-warning">Pending</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>657</td>
|
||||
<td>Bob Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-primary">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>175</td>
|
||||
<td>Mike Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-danger">Denied</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>User</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>183</td>
|
||||
<td>John Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-success">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>219</td>
|
||||
<td>Alexander Pierce</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-warning">Pending</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>657</td>
|
||||
<td>Bob Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-primary">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>175</td>
|
||||
<td>Mike Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-danger">Denied</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Fixed Header Table</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<div class="input-group input-group-sm" style="width: 150px;">
|
||||
<input type="text" name="table_search" class="form-control float-right" placeholder="Search">
|
||||
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body table-responsive p-0" style="height: 300px;">
|
||||
<table class="table table-head-fixed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>User</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>183</td>
|
||||
<td>John Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-success">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>219</td>
|
||||
<td>Alexander Pierce</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-warning">Pending</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>657</td>
|
||||
<td>Bob Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-primary">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>175</td>
|
||||
<td>Mike Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-danger">Denied</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>134</td>
|
||||
<td>Jim Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-success">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>494</td>
|
||||
<td>Victoria Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-warning">Pending</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>832</td>
|
||||
<td>Michael Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-primary">Approved</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>982</td>
|
||||
<td>Rocky Doe</td>
|
||||
<td>11-7-2014</td>
|
||||
<td><span class="tag tag-danger">Denied</span></td>
|
||||
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue