Files
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-tables.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding
- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.
2026-03-13 13:18:03 +08:00

1.7 KiB

name, description
name description
layout-tables Table layout and border behavior with border-collapse, table-layout

Table Layout

Utilities for controlling table display, border behavior, and layout algorithm.

Usage

Border collapse

<!-- Collapsed: adjacent borders merge into single border -->
<table class="border-collapse border border-gray-400">
  <thead>
    <tr>
      <th class="border border-gray-300 p-2">State</th>
      <th class="border border-gray-300 p-2">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 p-2">Indiana</td>
      <td class="border border-gray-300 p-2">Indianapolis</td>
    </tr>
  </tbody>
</table>

<!-- Separate: each cell has its own borders -->
<table class="border-separate border border-gray-400">...</table>

Table layout

<!-- Auto: columns sized to content -->
<table class="table-auto">...</table>

<!-- Fixed: columns use first row widths -->
<table class="table-fixed">...</table>

Table display (from layout-display)

Combine with table, table-row, table-cell, table-header-group, etc. for semantic table structure.

Responsive

<table class="border-collapse md:border-separate">...</table>

Key Points

  • border-collapse - adjacent borders merge (single border between cells)
  • border-separate - each cell displays its own borders
  • table-auto - column widths from content
  • table-fixed - fixed layout; first row sets column widths
  • In v4, border-* and divide-* default to currentColor; specify a color (e.g. border-gray-200) explicitly