| table header | table header | table header |
|---|---|---|
| default | ... | ... |
| default | ... | ... |
| default | ... | ... |
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table">
<thead>
<tr>
<th width="50%" align="left" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
| table header | table header | table header |
|---|---|---|
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-bordered">...</table>
| table header | table header | table header |
|---|---|---|
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">...</table>
| table header | table header | table header |
|---|---|---|
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-striped">...</table>
| active | ... | ... |
| active disabled | ... | ... |
| disabled | ... | ... |
| success | ... | ... |
| warning | ... | ... |
| danger | ... | ... |
| header | ||
| subheader | ||
| subsubheader | ||
| subsubtotal | ... | ... |
| subtotal | ... | ... |
| total | ... | ... |
<tr class="active">...</tr>
<tr class="active disabled">...</tr>
<tr class="disabled">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="header">...</tr>
<tr class="subheader">...</tr>
<tr class="subsubheader">...</tr>
<tr class="subsubtotal">...</tr>
<tr class="subtotal">...</tr>
<tr class="total">...</tr>
| table header | table header | table header |
|---|---|---|
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
<div class="table-responsive table-scroll" style="height:200px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-bordered">...</table>
</div>
| table header | table header | table header |
|---|---|---|
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
| text | ... | ... |
<div class="table-responsive table-scroll table-sticky" style="height:200px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-bordered">...</table>
</div>
Read more about this plugin on iCheck's website.
| table header | table header | table header |
|---|---|---|
| Row 01 | A | 1.00 |
| Row 02 | B | 2.00 |
| Row 03 | C | 3.00 |
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table tablesorter" id="tableID">...</table>
</div>
<!-- JAVASCRIPT ---------->
<script type="text/javascript" src="/scripts/common/js/tablesorter-2.31.3/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tableID").tablesorter({ sortList: [[0,0]] });
});
</script>
| table header | |
|---|---|
| Row 01Move to Top | |
| Row 02Move to Top | |
| Row 03Move to Top | |
| Row 04Move to Top | |
| Row 05Move to Top |
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover table-sortable" id="tableID">
<thead>
<tr>
<th width="95%" align="left" valign="middle">Text</th>
<th width="5%" align="right" valign="middle"> </th>
</tr>
</thead>
<tbody class="ui-sortable">
<tr class="ui-sortable-handle">
<td align="left" valign="middle">Text <a class="move-to-top"><i class="fa-solid fa-circle-chevron-up"></i>Move to Top</a></td>
<td align="right" valign="middle"><a class="move-row-btn-icon"><i class="fa-solid fa-bars"></i></a></td>
</tr>
<tr class="ui-sortable-handle">
<td align="left" valign="middle">Text <a class="move-to-top"><i class="fa-solid fa-circle-chevron-up"></i>Move to Top</a></td>
<td align="right" valign="middle"><a class="move-row-btn-icon"><i class="fa-solid fa-bars"></i></a></td>
</tr>
<tr class="ui-sortable-handle">
<td align="left" valign="middle">Text <a class="move-to-top"><i class="fa-solid fa-circle-chevron-up"></i>Move to Top</a></td>
<td align="right" valign="middle"><a class="move-row-btn-icon"><i class="fa-solid fa-bars"></i></a></td>
</tr>
</tbody>
</table>
</div>
<!-- JAVASCRIPT ---------->
<script type="text/javascript">
$(document).ready(function() {
$('#tableID tbody').sortable();
$('#tableID a.move-to-top').click(function() {
row = $(this).parents("tr:first");
$(this).parents('tbody').prepend(row);
});
});
</script>
| table header | |
|---|---|
| Row 01 |
| Row | 0.00 | 0.00 |
| Row 02 |
| Row | 0.00 | 0.00 |
| Row 03 |
| Row | 0.00 | 0.00 |
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover table-accordion">
<thead>
<tr>
<th width="5%" align="center" valign="middle">Text</th>
<th width="95%" align="left" valign="middle">Text</th>
</tr>
</thead>
<tbody>
<tr role="button" data-bs-toggle="collapse" href="#collapseTableRow-01" aria-expanded="false" aria-controls="collapseTableRow-01" class="collapsed">
<td width="5%" align="center" valign="middle"> </td>
<td width="95%" align="left" valign="middle">Text</td>
</tr>
</tbody>
</table>
<div class="collapse" id="collapseTableRow-01">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table">
<tbody>
<tr>
<td width="5%" align="center" valign="middle"> </td>
<td width="15%" align="left" valign="middle">Text</td>
<td width="40%" align="left" valign="middle">Text</td>
<td width="40%" align="left" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>