border-collapse
Determines whether adjacent table cell borders collapse or separate. bcc is most common, essential for clean tables.
Class List
| Class | CSS | Description |
|---|---|---|
bcc | border-collapse: collapse | Collapses adjacent cell borders. Most common table style |
bcs | border-collapse: separate | Separates cell borders. Allows border-spacing |
Visual Comparison
Compares bcc and bcs on the same table.
collapse — bcc
| <tr> <th class="tal py8px px12px b1pxsolid3F3F46 bg18181B cA1A1AA">Name | Role |
|---|---|
| Alice | Frontend |
| Bob | Backend |
| Carol | Design |
Adjacent cell borders merged. Clean lines
separate — bcs
| <tr> <th class="tal py8px px12px b1pxsolid3F3F46 bg18181B cA1A1AA">Name | Role |
|---|---|
| Alice | Frontend |
| Bob | Backend |
| Carol | Design |
Each cell border separate. Gaps between cells
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| General data table | bcc | Clean single borders |
| Table with cell spacing needed | bcs | Spacing adjustable via border-spacing |
| Cell border-radius needed | bcs | Cell radius ignored in collapse mode |
| Striped table | bcc | Distinguish rows with background color, no borders |
Class Details
bccborder-collapse: collapse
Merges adjacent cell borders. Most common table style for clean, modern tables. border-spacing ignored.
<!-- Default collapse table -->
<table class="w100p bcc fs14px">
<thead>
<tr>
<th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA">Item</th>
<th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA">Value</th>
</tr>
</thead>
<tbody>
<tr class="hover-bg18181B">
<td class="py12px px16px bb1pxsolid27272A cFAFAFA">Name</td>
<td class="py12px px16px bb1pxsolid27272A c71717A">Alice</td>
</tr>
<tr class="hover-bg18181B">
<td class="py12px px16px bb1pxsolid27272A cFAFAFA">Role</td>
<td class="py12px px16px bb1pxsolid27272A c71717A">Frontend</td>
</tr>
</tbody>
</table>Common Combinations
w100p bcc fs14px | Full width + collapse + base font (most common) |
bcc bb1pxsolid... | Collapse + bottom border only (modern style) |
bcc tlf | Collapse + fixed layout (equal column widths) |
bcsborder-collapse: separate
Keeps each cell border individual. Default; border-spacing controls gaps. Required for cell border-radius.
<!-- separate table + border-spacing -->
<table class="w100p bcs bs8px fs14px">
<thead>
<tr>
<th class="tal py12px px16px bg18181B b1pxsolid27272A br4px cA1A1AA">Item</th>
<th class="tal py12px px16px bg18181B b1pxsolid27272A br4px cA1A1AA">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py12px px16px b1pxsolid27272A br4px cFAFAFA">Name</td>
<td class="py12px px16px b1pxsolid27272A br4px c71717A">Bob</td>
</tr>
<tr>
<td class="py12px px16px b1pxsolid27272A br4px cFAFAFA">Role</td>
<td class="py12px px16px b1pxsolid27272A br4px c71717A">Backend</td>
</tr>
</tbody>
</table>With border-radius
border-radius doesn't apply to cells in bcc mode. Use bcs for rounded cells.
Tips & Notes
Use bcc in most cases
Modern tables almost always use bcc. No double borders, clean and simple.
border-spacing ignored with bcc
border-spacing has no effect in bcc mode. Switch to bcs for cell spacing.
Applies to table elements only
border-collapse only applies to table or dt (display: table). No effect on divs.