Tables

Codexify provides opt-in table styles due to widespread usage of third-party plugins.

Overview

Table styles are opt-in due to the widespread usage of third-party plugins and widgets. Add .table class to <table> elements to style the tables.

<table class="table">
    <thead>
        <tr>
            <th>App</th>
            <th>Users</th>
            <th>Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bug Catcher</td>
            <td>12,345</td>
            <td>$65,432</td>
        </tr>
        <tr>
            <td>Pro Calculator</td>
            <td>678,901</td>
            <td>$345,678</td>
        </tr>
        <tr>
            <td>Floral Journal</td>
            <td>2,345</td>
            <td>$3,210</td>
        </tr>
    </tbody>
</table>

Variants

You can add .table-<variant> to either a cell or row of the row, or the entire table.

<!-- On tables -->
<table class="table table-progressive">...</table>
<table class="table table-destructive">...</table>
<table class="table table-error">...</table>
<table class="table table-warning">...</table>
<table class="table table-success">...</table>
<table class="table table-notice">...</table>

<!-- On rows -->
<tr class="table-progressive">...</tr>
<tr class="table-destructive">...</tr>
<tr class="table-error">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-success">...</tr>
<tr class="table-notice">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-progressive">...</td>
  <td class="table-destructive">...</td>
  <td class="table-error">...</td>
  <td class="table-warning">...</td>
  <td class="table-success">...</td>
  <td class="table-notice">...</td>
</tr>