CORE UTILITY FAMILY

Tables and multi-column

Control semantic table display, layout algorithms, collapsed or separated borders, cell spacing, captions, and multi-column content flow.

completeTarget v0.37 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use table-auto when content should influence column widths, table-fixed for predictable tracks, and multi-column flow for editorial content rather than application grids.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-table-fixedtable-layout: fixed;

co-border-separateborder-collapse: separate;

co-border-spacing-x-3

--co-border-spacing-x: calc(var(--co-space-unit) * 3); border-spacing: var(--co-border-spacing-x) var(--co-border-spacing-y, 0px);

co-caption-bottomcaption-side: bottom;

co-columns-smcolumns: var(--co-container-sm);

co-column-span-allcolumn-span: all;

co-column-rule-brand-500column-rule-color: var(--co-color-brand-500);

VISUAL EXAMPLE · TABLE LAYOUT

Choose content-driven or predictable columns

Automatic layout lets cell content influence column width. Fixed layout uses the table width and first row, which is better for stable dashboards and truncation.

Project · 1/2	Status	Owner
Coordiation CSS	Active	Design team
Documentation	Review	Platform team

component.coord

<table class="co-table-auto co-w-full">...</table>

<table class="co-table-fixed co-w-full">
  <thead><tr><th class="co-w-1/2">Project</th><th>Status</th><th>Owner</th></tr></thead>
</table>

VISUAL EXAMPLE · BORDER SPACING

Create space between separate cells

Border spacing only applies when borders are separated. Axis utilities allow wider column gaps than row gaps.

One	Two
Three	Four

component.coord

<table class="co-border-separate co-border-spacing-x-3 co-border-spacing-y-2">
  <tbody>
    <tr><td>One</td><td>Two</td></tr>
    <tr><td>Three</td><td>Four</td></tr>
  </tbody>
</table>

VISUAL EXAMPLE · CAPTIONS

Keep the table description semantic

Use a caption to describe the table for every reader. Caption-side changes visual placement without moving the caption out of the table structure.

Deployment status updated 29 August 2026.
Environment	Status
Production	Healthy

component.coord

<table class="co-w-full">
  <caption class="co-caption-bottom co-pt-3 co-text-left co-text-sm">
    Deployment status updated 29 August 2026.
  </caption>
  ...
</table>

VISUAL EXAMPLE · MULTI-COLUMN

Flow editorial text across columns

Multi-column layout is designed for continuous reading flow. Use it for articles and reference material, not for row-aligned application data.

Coordiation scans source files as plain text and extracts complete utility candidates. The compiler resolves theme tokens, utility declarations, and variants before generating static CSS. This keeps browser output small and removes framework runtime code. Documentation and machine-readable registries are generated from the same source of truth so agents can verify support before creating an interface.

component.coord

<article class="co-columns-2 co-gap-8 co-text-sm co-leading-relaxed">
  <p>Coordiation scans source files...</p>
  <p>The compiler resolves utilities...</p>
</article>

VISUAL EXAMPLE · COLUMN RULES

Add a separator without changing flow

A column rule sits inside the gap between text columns. Width, style, and color are composed independently like borders.

Utility-first styling remains explicit. Theme variables keep repeated decisions recognizable. Logical properties follow writing modes. Static output keeps delivery predictable. Generated registries let humans and AI inspect exact support. Tests guard every documented example.

component.coord

<article class="co-columns-3 co-gap-8 co-column-rule co-column-rule-solid co-column-rule-neutral-300">
  Editorial content...
</article>

VISUAL EXAMPLE · BREAK CONTROL

Keep related content together

Avoid-column prevents a card, quotation, or heading group from splitting between columns when space permits.

Source scanning

This card remains together inside one column.

Utility registry

This card remains together inside one column.

Static output

This card remains together inside one column.

AI contract

This card remains together inside one column.

component.coord

<article class="co-columns-2 co-gap-6">
  <section class="co-break-inside-avoid-column co-mb-6">Complete feature card</section>
  <section class="co-break-inside-avoid-column co-mb-6">Another card</section>
</article>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-table-fixed co-border-separate co-border-spacing-x-3 co-caption-bottom co-columns-sm co-column-span-all co-column-rule-brand-500">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Table display utilities cover table, row, cell, caption, column, and header/footer/body grouping roles.
02
Border spacing supports shared, horizontal, and vertical values and only applies when borders are separated.
03
Column count utilities accept numbers while container-size tokens such as co-columns-sm define an ideal column width.
04
Multi-column gaps reuse gap utilities and page or column break controls reuse the complete Layout family.
05
Column fill, spanning, and rule width/color/style provide explicit editorial flow controls beyond the baseline table utilities.

CSS PROPERTIES

What this family controls

displaytable-layoutborder-collapseborder-spacingcaption-sidecolumnscolumn-fillcolumn-spancolumn-rulecolumn-gapbreak-beforebreak-afterbreak-inside

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-table-fixed md:co-border-separate hover:co-table-fixed">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-table-*
co-[content-visibility:auto]

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Responsive table overflow still requires an explicit wrapper because table layout does not create a scroll container.
Multi-column layout follows source order vertically before continuing horizontally, so it is unsuitable for data grids or reading orders that must remain row-based.
Column rules occupy the gap without changing its calculated width.

Previous← Effects, filters, and masks NextTransforms and perspective →