Nearby lessons
58 of 61📊 Tailwind CSS - Tables (Collapse, Spacing, Layout & Caption)
📖 Overview
Table utilities control border behavior, cell spacing, layout algorithms, and caption positioning for HTML tables.
📏 Border Collapse
Control whether table borders are collapsed or separated:
border-collapse(default) – Collapses adjacent borders into a single border.border-separate– Keeps adjacent borders separate.
↔️ Border Spacing
Control the spacing between table borders (only works with border-separate):
border-spacing-0,border-spacing-2,border-spacing-4- Axis specific:
border-spacing-x-4,border-spacing-y-4
📐 Table Layout
Control the table layout algorithm:
table-auto(default) – Column widths are based on cell content.table-fixed– Column widths are based on the table's width and the width of the first row cells.
📍 Caption Side
Control the position of a table's caption:
caption-top(default)caption-bottom
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!Tailwind CSS - Transition