Table

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

Change Log

Classes

hx-flag-table

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

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

hx-table-clickable-rows

A class to set table rows to be clickable and use a hand cursor

hx-table-small

A class that allows a table with few columns to shrink less than the size of its container.