Tables

A table wraps a semantic <table> with Ringover styling for headers, rows, borders, scrolling, and cell layouts.

Examples

Basic Table

Use .ro-table as the outer block and .ro-table-wrapper around the scrollable <table>. Wrap cell content in .ro-table-cell-content.

<div class="ro-table ro-border-regular">
<section class="ro-table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div class="ro-table-cell-content">Jane Doe</div></td>
        <td><div class="ro-table-cell-content">Active</div></td>
      </tr>
      <tr>
        <td><div class="ro-table-cell-content">John Smith</div></td>
        <td><div class="ro-table-cell-content">Inactive</div></td>
      </tr>
    </tbody>
  </table>
</section>
</div>

Preview

Name	Status
Jane Doe	Active
John Smith	Inactive

Sticky Header

Add .ro-sticky-header so the header row stays visible while scrolling.

<div class="ro-table ro-sticky-header ro-border-regular" style="--ro-table-max-height: 120px;">
  <section class="ro-table-wrapper">
    <table>…</table>
  </section>
</div>

Text Layout Cell

Add .ro-layout-text on a cell for single-line ellipsis text.

<td class="ro-layout-text">
<div class="ro-table-cell-content">Long text that truncates with ellipsis</div>
</td>

Modifiers

Class	Description
.ro-border-none	Transparent background, no outer border.
.ro-border-regular	Standard outer border.
.ro-border-light	Light outer border.
.ro-sticky-header	Sticky <thead> while scrolling.
.ro-fixed-first-col	Sticky first column.
.ro-row-height-lg	Taller row height.
.ro-table-fill	Fills available height in a flex parent.
.ro-no-scroll	On wrapper — disables scroll.
.ro-layout-text	Ellipsis text layout in a cell.
.ro-wrap-no	On cell content — prevents wrapping.
.ro-table-skeleton-bar	Loading skeleton bar in a cell.
.ro-table-empty-cell, .ro-table-empty-content	Empty state row.
.ro-table-load-more-cell, .ro-table-load-more-content	Load-more row.

CSS Custom Properties

Variable	Description
--ro-table-max-height	Max height before the wrapper scrolls.
--ro-table-first-col-width	Width of the fixed first column.
--ro-table-col-min-width	Minimum column width.
--ro-table-line-h	Row line height.
--ro-table-bg, --ro-table-bg-hover	Table background tokens.

Set aria-busy="true" on <tbody> to disable row hover during loading.