Styleframe Logo
Utilities

Tables

Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.

Overview

Table utilities help you control the layout and styling of HTML tables including border behavior, cell spacing, layout algorithm, and caption positioning.

Why Use Table Utilities?

Table utilities help you:

  • Control border behavior: Choose between collapsed or separate borders
  • Manage cell spacing: Set consistent spacing between table cells
  • Optimize layout: Choose between auto or fixed table layout algorithms
  • Position captions: Control where table captions appear

useBorderCollapseUtility

The useBorderCollapseUtility() function creates utility classes for controlling how table borders interact.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderCollapseUtility } from "@styleframe/theme";

const s = styleframe();

useBorderCollapseUtility(s, {
    collapse: 'collapse',
    separate: 'separate',
});

export default s;

Border Collapse Values

ValueDescription
collapseAdjacent cell borders merge into a single border
separateEach cell has its own distinct borders

useBorderSpacingUtility

The useBorderSpacingUtility() function creates utility classes for setting the spacing between table cell borders.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderSpacingUtility, useBorderSpacingXUtility, useBorderSpacingYUtility } from "@styleframe/theme";

const s = styleframe();

useBorderSpacingUtility(s, {
    '0': '0',
    '1': '0.25rem',
    '2': '0.5rem',
    '4': '1rem',
});

useBorderSpacingXUtility(s, {
    '0': '0',
    '2': '0.5rem',
    '4': '1rem',
});

useBorderSpacingYUtility(s, {
    '0': '0',
    '2': '0.5rem',
    '4': '1rem',
});

export default s;
Note: Border spacing only works when border-collapse is set to separate.

useTableLayoutUtility

The useTableLayoutUtility() function creates utility classes for controlling the table layout algorithm.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useTableLayoutUtility } from "@styleframe/theme";

const s = styleframe();

useTableLayoutUtility(s, {
    auto: 'auto',
    fixed: 'fixed',
});

export default s;

Table Layout Values

ValueDescription
autoColumn widths determined by content (default)
fixedColumn widths determined by first row or explicit widths; faster rendering

useCaptionSideUtility

The useCaptionSideUtility() function creates utility classes for positioning table captions.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useCaptionSideUtility } from "@styleframe/theme";

const s = styleframe();

useCaptionSideUtility(s, {
    top: 'top',
    bottom: 'bottom',
});

export default s;

Examples

Data Table with Collapsed Borders

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderCollapseUtility, useTableLayoutUtility } from "@styleframe/theme";

const s = styleframe();

useBorderCollapseUtility(s, { collapse: 'collapse' });
useTableLayoutUtility(s, { fixed: 'fixed' });

export default s;

Usage in HTML:

<table class="_border-collapse:collapse _table-layout:fixed" style="width: 100%;">
    <thead>
        <tr>
            <th style="border: 1px solid #e5e7eb;">Name</th>
            <th style="border: 1px solid #e5e7eb;">Status</th>
            <th style="border: 1px solid #e5e7eb;">Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #e5e7eb;">John Doe</td>
            <td style="border: 1px solid #e5e7eb;">Active</td>
            <td style="border: 1px solid #e5e7eb;">Admin</td>
        </tr>
    </tbody>
</table>

Spaced Table Cells

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderCollapseUtility, useBorderSpacingUtility } from "@styleframe/theme";

const s = styleframe();

useBorderCollapseUtility(s, { separate: 'separate' });
useBorderSpacingUtility(s, { '2': '0.5rem' });

export default s;

Usage in HTML:

<table class="_border-collapse:separate _border-spacing:2">
    <tr>
        <td style="background: #f3f4f6; padding: 1rem;">Cell 1</td>
        <td style="background: #f3f4f6; padding: 1rem;">Cell 2</td>
    </tr>
    <tr>
        <td style="background: #f3f4f6; padding: 1rem;">Cell 3</td>
        <td style="background: #f3f4f6; padding: 1rem;">Cell 4</td>
    </tr>
</table>

Best Practices

  • Use table-layout: fixed for performance: Fixed layout renders faster and more predictably with large tables
  • Choose border-collapse carefully: Collapsed borders are simpler but separate allows for spacing
  • Use border-spacing with separate borders: Border spacing only works when borders are not collapsed
  • Consider accessibility: Ensure tables have proper headers and captions for screen readers
  • Responsive tables: For responsive designs, consider alternative layouts for mobile

FAQ

SVG

Create SVG utilities for fill, stroke, and stroke-width with full type safety.

Transforms

Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.