Notes

  • Romo tables aren’t designed to be nested in one another. Doing so causes the styles of the parent table to be forced on the child table.

Default styles

For basic styling with horizontal dividers, add the base class .romo-table.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table">
  ...
</table>

Optional classes

{th|td}.romo-N-N

Add grid column size classes to set table cell widths.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table">
  <thead>
    <tr>
      <th class="romo-1-12">#</th>
      <th class="romo-7-12">Name</th>
      <th class="romo-2-12">Slug</th>
      <th class="romo-2-12">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="romo-1-12">1</td>
      <td class="romo-7-12">Joe Test</td>
      <td class="romo-2-12">joe-test</td>
      <td class="romo-2-12">10</td>
    </tr>
    <tr>
      <td class="romo-1-12">2</td>
      <td class="romo-7-12">Jane Doe</td>
      <td class="romo-2-12">jane-doe</td>
      <td class="romo-2-12">18</td>
    </tr>
    <tr>
      <td class="romoromo-1-12">3</td>
      <td class="romoromo-7-12">Good Corp.</td>
      <td class="romoromo-2-12">good-corp</td>
      <td class="romoromo-2-12">5</td>
    </tr>
  </tbody>
</table>

.romo-table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-striped">
  ...
</table>

<table class="romo-table romo-table-striped romo-table-striped-alt">
  ...
</table>

.romo-table-alt

Uses the alternate bg color for the table background.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-alt">
  ...
</table>

tr.romo-{muted|warning|error|info|success|inverse}

Add color emphasis to rows.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-hover">
  ...
  <tr class="romo-muted romo-text-muted">...</tr>
  <tr class="romo-warning">...</tr>
  <tr class="romo-error">...</tr>
  <tr class="romo-info">...</tr>
  <tr class="romo-success">...</tr>
  <tr class="romo-inverse romo-text-inverse">...</tr>
</table>

.romo-table-hover

Add hover state to rows within a <tbody>.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-hover">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-hover romo-table-striped">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-hover romo-table-alt">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-hover">
  ...
  <tr class="romo-muted romo-text-muted">...</tr>
  <tr class="romo-warning">...</tr>
  <tr class="romo-error">...</tr>
  <tr class="romo-info">...</tr>
  <tr class="romo-success">...</tr>
  <tr class="romo-inverse romo-text-inverse">...</tr>
</table>

.romo-table-border{0-2}

Adds sized borders to the table.

# Name Slug Count
1 Joe Test joe-test 10
Joe Test joe-test 0
2 Jane Doe jane-doe 18
3 Good Corp.
# Name Slug Count
1 Joe Test joe-test 10
Joe Test joe-test 0
2 Jane Doe jane-doe 18
3 Good Corp.
# Name Slug Count
1 Joe Test joe-test 10
Joe Test joe-test 0
2 Jane Doe jane-doe 18
3 Good Corp.
# Name Slug Count
1 Joe Test joe-test 10
Joe Test joe-test 0
2 Jane Doe jane-doe 18
3 Good Corp. 
<table class="romo-table romo-table-border{0-2}">
  ...
</table>

.romo-table-border-none

Remove all borders from the table.

# Name Slug Count
1 Joe Test joe-test 10
Joe Test joe-test 0
2 Jane Doe jane-doe 18
3 Good Corp. 
<table class="romo-table romo-table-border-none">
  ...
</table>

.romo-table-border-{muted|warning|error|info|success|inverse}

Adds border color empasis to the entire table.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-border2 romo-table-border-{muted|warning|error|info|success|inverse}">
  ...
</table>

.romo-table-border-alt

Uses the alternate border color for the table borders.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-border2 romo-table-alt romo-table-border-alt">
  ...
</table>

.romo-table-padN{-top|-right|-bottom|-left|}

Adds cell padding to every cell in the table

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-pad0">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-pad">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-pad1">
  ...
</table>
# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-pad2">
  ...
</table>

Custom Styles

Use any helper style classes in any combination on rows/cells.

# Name Slug Count
1 Joe Test joe-test 10
2 Jane Doe jane-doe 18
3 Good Corp. good-corp 5 
<table class="romo-table romo-table-pad2">
  <thead>
    <tr>
      <th class="romo-pad2">#</th>
      <th>Name</th>
      <th class="romo-text2 romo-pad2-left">Slug</th>
      <th class="romo-1-12 romo-align-center romo-align-top">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="romo-bg-info">Joe Test</td>
      <td>joe-test</td>
      <td class="romo-1-12 romo-text2 romo-border-error romo-border4">10</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td class="romo-pad0">jane-doe</td>
      <td class="romo-1-12 romo-align-center romo-text-success">18</td>
    </tr>
    <tr class="romo-bg-success">
      <td>3</td>
      <td>Good Corp.</td>
      <td>good-corp</td>
      <td class="romo-1-12">5</td>
    </tr>
  </tbody>
</table>

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> (optional) Container element for table header rows to label table columns
<tfoot> (optional) Container element for table footer rows
<tbody> Container element for table rows in the body of the table
<tr> Container element for a set of table cells that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels 
<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>