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" data-tracking-id="component-table-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" data-tracking-id="component-table-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" data-tracking-id="component-table-data">
  <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" data-tracking-id="component-table-sticky-header">
  <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" data-tracking-id="component-table-fixed-left-column">
  <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" data-tracking-id="component-accordion-table">
  <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);

});

content