HexagonJS
Edit Page
Table
Styling for tables with the hx-table class.
Examples
Header 1 Header 2 Header 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3
Row 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3
Row 5 Cell 1 Row 5 Cell 2 Row 5 Cell 3

HTML

<table class="hx-table hx-flag-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
    <tr>
      <td>Row 5 Cell 1</td>
      <td>Row 5 Cell 2</td>
      <td>Row 5 Cell 3</td>
    </tr>
  </tbody>
</table>

1.x table styles

Header 1 Header 2 Header 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3
Row 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3
Row 5 Cell 1 Row 5 Cell 2 Row 5 Cell 3

HTML

<p class="hx-header-medium">1.x table styles</p>
<table class="hx-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
    <tr>
      <td>Row 5 Cell 1</td>
      <td>Row 5 Cell 2</td>
      <td>Row 5 Cell 3</td>
    </tr>
  </tbody>
</table>
Api
Classes
hx-flag-tableadded
Applies the updated table styles to help with aligning items and keeping row height consistent.
This class applies the following changes:
  • Increase font size for readability
  • Increase row height for readability
  • Remove row hover styles by default (can be added with hx-table-clickable-rows )
  • Make table full width by default (can be reset with hx-table-small )
hx-table-clickable-rowsadded
A class to set table rows to be clickable and use a hand cursor
hx-table-smalladded
A class that allows a table with few columns to shrink less than the size of its container.
hx-table
The class to give to table elements or a container with a table element directly inside it.
Classes
hx-table-header-allow-wrap
A class that can be added to th elements that allows the text to wrap onto multiple lines.
Extra Classes
hx-table-centered
A class to center the table within its container.
hx-table-full
A class to make the table full width