bbb2f41591
- 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.
68 lines
1.7 KiB
Markdown
68 lines
1.7 KiB
Markdown
---
|
|
name: layout-tables
|
|
description: 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<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
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/border-collapse
|
|
- https://tailwindcss.com/docs/table-layout
|
|
-->
|