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">
  <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-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