Border-collapse
Merge cell borders with border-collapse.
What is border-collapse?
The border-collapse property takes two values: collapse and separate (default). collapse merges cell borders into a single line; separate keeps each cell's border apart.
Most data tables use collapse for a cleaner look. separate is useful when you want space between cells. Which one you pick depends on the design.
Border-spacing
The border-spacing property only works when border-collapse: separate is set. It controls the horizontal and vertical space between cells.
Example: border-spacing: 8px; adds 8 pixels of space on all sides. With two values, the first is horizontal, the second vertical: border-spacing: 4px 12px. If you use collapse, this property has no effect. The two are considered together.
Exercise Add border-collapse to a sales report table
For a table with class .satislar, add the following: border-collapse: collapse; and width: 100%; on the .satislar selector; border: 1px solid #cbd5e1; and padding: 10px; on the .satislar td, .satislar th selector.
Show example solution
open a .satislar selector and write border-collapse: collapse; and width: 100%; inside. Then open a .satislar td, .satislar th selector and write border: 1px solid #cbd5e1; and padding: 10px; inside.
Example solution:
.satislar {
border-collapse: collapse;
width: 100%;
}
.satislar td, .satislar th {
border: 1px solid #cbd5e1;
padding: 10px;
}Test yourself
-
Which value merges cell borders?
table { border-collapse: ?; }- separate
- collapse
- spacing
- merge
Show answer
collapse — Correct! The collapse value merges cell borders into a single line.
-
Merge the borders
table { border-collapse: ____; }Show answer
table { border-collapse: collapse; } -
Match values to behavior
- collapse
- merges borders
- separate
- keeps borders apart
- border-spacing: 8px
- space between cells
- padding: 12px
- space inside cell