Table
A table displays collections of data that are organized into rows.
content
Demo
A standard table
ID | Title 01 | Title 02 | Title 03 | Title 04 |
---|---|---|---|---|
01 | Text | Text | Text | Text |
02 | Text | Text | Text | Text |
03 | Text | Text | Text | Text |
<div class="standard">
<table>
<thead>
<tr>
<th>ID</th>
<th>Title 01</th>
<th>Title 02</th>
<th>Title 03</th>
<th>Title 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>02</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>03</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
A customized table
Use .customized class to make the table background one line in white and grey in the other line.
ID | Title 01 | Title 02 | Title 03 | Title 04 |
---|---|---|---|---|
01 | Text | Text | Text | Text |
02 | Text | Text | Text | Text |
03 | Text | Text | Text | Text |
02 | Text | Text | Text | Text |
<div class="standard customized">
<table>
<thead>
<tr>
<th>ID</th>
<th>Title 01</th>
<th>Title 02</th>
<th>Title 03</th>
<th>Title 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>02</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>03</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Data tables
Rows can be selectable by making the first column a selectable column. Use .checkbox class to make each row has a hover stylesheet.
ID | Title 01 | Title 02 | Title 03 | Title 04 | |
---|---|---|---|---|---|
01 | Text | Text | Text | Text | |
02 | Text | Text | Text | Text | |
03 | Text | Text | Text | Text |
<div class="checkbox">
<table>
<thead>
<tr>
<th>
<input id="selectAll" type="checkbox">
</th>
<th>ID</th>
<th>Title 01</th>
<th>Title 02</th>
<th>Title 03</th>
<th>Title 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>01</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>02</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>03</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Sticky header
Use .fixHead class to make the header will stick to the top when you reach its scroll position.
ID | Title 01 | Title 02 | Title 03 | Title 04 |
---|---|---|---|---|
01 | Text | Text | Text | Text |
02 | Text | Text | Text | Text |
03 | Text | Text | Text | Text |
04 | Text | Text | Text | Text |
05 | Text | Text | Text | Text |
<div class="fixHead">
<table>
<thead>
<tr>
<th>ID</th>
<th>Title 01</th>
<th>Title 02</th>
<th>Title 03</th>
<th>Title 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>02</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>03</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>04</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>05</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Table with a fixed left column
Only the columns will scroll horizontally.
Compare / Part Number | Form Factor | Type | CPU | Frequency | Max Turbo | Core Number | LLC | CPU | Max Turbo | Core Number |
---|---|---|---|---|---|---|---|---|---|---|
TS-2477UX-RP-3600-8G | COM Express Compact R2.1, Type 6 Pin-out | Type 6 | Intel® Core™ i7-8665UE | 1.7 GHZ | 4.4 GHZ | 4 | 4MB | 15W | 16 | 16MB |
TS-2477UX-RP-3600-16G | COM Express Compact R2.1, Type 6 Pin-out | Type 6 | Intel® Core™ i7-8665UE | 1.7 GHZ | 4.4 GHZ | 4 | 4MB | 15W | 16 | 16MB |
TS-2477UX-RP-3600-32G | COM Express Compact R2.1, Type 6 Pin-out | Type 6 | Intel® Core™ i7-8665UE | 1.7 GHZ | 4.4 GHZ | 4 | 4MB | 15W | 16 | 16MB |
<div class="row-inner fixTable-btn-wrapper clearfix">
<div class="fixTable-btn">
<button id="left" class="left" aria-label="scroll left"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></button>
<button id="right" class="right" aria-label="scroll right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button>
</div>
</div>
<div class="row-inner col-12">
<div id="fixTable-parent" class="fixTable-parent">
<table id="fixTable" class="fixTable">
<thead>
<tr>
<th>Compare / Part Number</th>
<th>Form Factor</th>
<th>Type</th>
<th>CPU</th>
<th>Frequency</th>
<th>Max Turbo</th>
<th>Core Number</th>
<th>LLC</th>
<th>CPU</th>
<th>Max Turbo</th>
<th>Core Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>COM Express Compact R2.1, Type 6 Pin-out</td>
<td>Type 6</td>
<td>Intel® Core™ i7-8665UE</td>
<td>1.7 GHZ</td>
<td>4.4 GHZ</td>
<td>4</td>
<td>4MB</td>
<td>15W</td>
<td>16</td>
<td>16MB</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>COM Express Compact R2.1, Type 6 Pin-out</td>
<td>Type 6</td>
<td>Intel® Core™ i7-8665UE</td>
<td>1.7 GHZ</td>
<td>4.4 GHZ</td>
<td>4</td>
<td>4MB</td>
<td>15W</td>
<td>16</td>
<td>16MB</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>COM Express Compact R2.1, Type 6 Pin-out</td>
<td>Type 6</td>
<td>Intel® Core™ i7-8665UE</td>
<td>1.7 GHZ</td>
<td>4.4 GHZ</td>
<td>4</td>
<td>4MB</td>
<td>15W</td>
<td>16</td>
<td>16MB</td>
</tr>
</tbody>
</table>
</div>
</div>
Accordion table
When there's too much information to show and the table can't display all at once. Create an accordion out of the table.
TS-2477UX-RP-3600-8G | TS-2477UX-RP-3600-16G | TS-2477UX-RP-3600-32G | |
---|---|---|---|
Form Factor | |||
Form Factor | COM Express Compact | COM Express Compact | COM Express Compact |
Pin-out | Type 6 | Type 6 | Type 6 |
Memory | |||
ECC Support | N/A | N/A | N/A |
Max. | 64GB | 16GB | 8GB |
Form Factor | |
---|---|
Form Factor | |
TS-2477UX-RP-3600-8G | COM Express Compact |
TS-2477UX-RP-3600-16G | COM Express Compact |
TS-2477UX-RP-3600-32G | COM Express Compact |
Pin-out | |
TS-2477UX-RP-3600-8G | Type 6 |
TS-2477UX-RP-3600-16G | Type 6 |
TS-2477UX-RP-3600-32G | Type 6 |
Memory | |
---|---|
ECC Support | |
TS-2477UX-RP-3600-8G | N/A |
TS-2477UX-RP-3600-16G | N/A |
TS-2477UX-RP-3600-32G | N/A |
Max. | |
TS-2477UX-RP-3600-8G | 64GB |
TS-2477UX-RP-3600-16G | 16GB |
TS-2477UX-RP-3600-32G | 8GB |
<div class="accordionTable pc">
<table class="list">
<thead>
<tr>
<th></th>
<th>TS-2477UX-RP-3600-8G</th>
<th>TS-2477UX-RP-3600-16G</th>
<th>TS-2477UX-RP-3600-32G</th>
</tr>
</thead>
<tbody class="accordion-header toggle">
<tr>
<td colspan="4">
<i class="fal fa-angle-down"></i>Form Factor
</td>
</tr>
</tbody>
<tbody class="accordion-content">
<tr>
<td>Form Factor</td>
<td>COM Express Compact</td>
<td>COM Express Compact</td>
<td>COM Express Compact</td>
</tr>
<tr>
<td>Pin-out</td>
<td>Type 6</td>
<td>Type 6</td>
<td>Type 6</td>
</tr>
</tbody>
</table>
<table class="list">
<tbody class="accordion-header toggle">
<tr>
<td colspan="4">
<i class="fal fa-angle-down"></i>Memory
</td>
</tr>
</tbody>
<tbody class="accordion-content" style="visibility: visible;">
<tr>
<td>ECC Support</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>Max.</td>
<td>64GB</td>
<td>16GB</td>
<td>8GB</td>
</tr>
</tbody>
</table>
</div>
<div class="accordionTable mb-accordion">
<table class="list">
<thead class="mb-title">
<tr>
<th colspan="2">Form Factor</th>
</tr>
</thead>
<tbody class="accordion-header toggle">
<tr>
<td colspan="2">
<i class="fal fa-angle-down"></i>Form Factor
</td>
</tr>
</tbody>
<tbody class="accordion-content">
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>COM Express Compact</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-16G</td>
<td>COM Express Compact</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-32G</td>
<td>COM Express Compact</td>
</tr>
</tbody>
</table>
<table class="list close">
<tbody class="accordion-header toggle">
<tr>
<td colspan="2">
<i class="fal fa-angle-down"></i>Pin-out
</td>
</tr>
</tbody>
<tbody class="accordion-content">
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>Type 6</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-16G</td>
<td>Type 6</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-32G</td>
<td>Type 6</td>
</tr>
</tbody>
</table>
<table class="list">
<thead class="mb-title">
<tr>
<th colspan="2">Memory</th>
</tr>
</thead>
<tbody class="accordion-header toggle">
<tr>
<td colspan="2">
<i class="fal fa-angle-down"></i>ECC Support
</td>
</tr>
</tbody>
<tbody class="accordion-content">
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>N/A</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-16G</td>
<td>N/A</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-32G</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table class="list close">
<tbody class="accordion-header toggle">
<tr>
<td colspan="2">
<i class="fal fa-angle-down"></i>Max.
</td>
</tr>
</tbody>
<tbody class="accordion-content">
<tr>
<td>TS-2477UX-RP-3600-8G</td>
<td>64GB</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-16G</td>
<td>16GB</td>
</tr>
<tr>
<td>TS-2477UX-RP-3600-32G</td>
<td>8GB</td>
</tr>
</tbody>
</table>
</div>
Basic Usage
Please avoid duplicating the reference to the same CSS and JS files.
CSS
Copy-paste the stylesheet <link>
into your <head>
before all other stylesheets to load our CSS.
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/table.css">
JavaScript Instantiation
Place the following <script>
near the end of your pages, right before the closing </body>
tag, to enable them.
<script type="text/javascript" src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://advcloudfiles.advantech.com/web/lib/tableHeadFixer/tableHeadFixer.js"></script>
Call the Data tables via JavaScript:
$("#selectAll").on('click',function() {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
$("input[type=checkbox]").on('click',function() {
if (!$(this).prop("checked")) {
$("#selectAll").prop("checked", false);
}
});
Call the Table with a fixed left column via JavaScript:
$("#fixTable").tableHeadFixer({ "left": 1 })
$("#left").on("click", function () {
var leftPos = $('#fixTable-parent').scrollLeft();
document.getElementById("fixTable-parent").scrollLeft = leftPos - 320
});
$("#right").on("click", function () {
var leftPos = $('#fixTable-parent').scrollLeft();
document.getElementById("fixTable-parent").scrollLeft = leftPos + 320
});
Call the Accordion table via JavaScript:
$(function () {
var Accordion = function (el, multiple) {
this.el = el || {};
this. multiple = multiple || true;
var links = this.el.find('.accordion-header');
links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown)
}
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.closest();
$this.parent().toggleClass('close');
if (!e.data.multiple) {
$el.find('.accordion-content').not($next).closest().parent().removeClass('close');
};
}
var accordion = new Accordion($('.accordionTable .list'), true);
});