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.
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

↔️ 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
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📐 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.
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📍 Caption Side

Control the position of a table's caption:

  • caption-top (default)
  • caption-bottom
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!Tailwind CSS - Transition