Welcome to Part 23 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Table Styling & Borders Collapsing.

HTML tables (<table>) are designed to display tabular grid data. However, unstyled tables look archaic and are difficult to read. CSS offers specific formatting properties to manage cell borders, handle spacing, align captions, configure empty cells, and implement responsive containers so table grids scale cleanly on mobile devices.

---

Chapter 133: Table Border Layouts

By default, table elements are rendered with separate cell borders, resulting in double-line borders around cells.

➤ Border Collapse (border-collapse)

Determines whether table cells have separate or shared borders:

• separate (Default): Every cell has its own border.
• collapse: Adjacent borders are merged into a single border, yielding clean grid lines.

.styled-table {
  width: 100%;
  border-collapse: collapse; /* Merges borders into clean lines */
}

➤ Cell Border Spacing (border-spacing)

If border-collapse is set to separate, you can control the spacing gaps between cell borders:

• border-spacing: 10px 5px; (horizontal and vertical gaps).

---

Chapter 134: Table Caption & Empty Cells

➥ Caption Side (caption-side)

Positions the table’s <caption> element:

• top (Default): Places the caption above the table.
• bottom: Places the caption underneath the table.

caption {
  caption-side: bottom;
  padding: 10px 0;
}

➥ Empty Cells (empty-cells)

Determines how cells with zero content are rendered under the separate border model:

• show (Default): Borders and backgrounds are drawn.
• hide: Borders and backgrounds are hidden.

---

Chapter 135: Responsive Mobile Tables

Because tables require horizontal widths to display column structures, they frequently break layouts on narrow mobile viewports.

➔ Scroll Container Strategy

The simplest way to prevent tables from breaking page layouts is to wrap the <table> in an overflow scroll container wrapper:

.table-responsive-container {
  width: 100%;
  overflow-x: auto; /* Adds a horizontal scrollbar only if the table overflows */
}

➔ Column to Block Refactor (Advanced)

On narrow viewports, you can collapse table cells into block elements using CSS media queries and custom data attributes:

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block; /* Collapse grid into vertical block stacks */
  }
  thead { display: none; /* Hide header rows */ }
  td {
    position: relative;
    padding-left: 50%;
  }
  td::before {
    content: attr(data-label); /* Pull text label from data attributes */
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

---

Chapter 136: Tables Practice & Self-Check

➤ Practice Exercises

1. Exercise 1: Clean Zebra Table: Style a data table with collapsing borders and alternate row backgrounds (zebra striping).

   .zebra-table {
     border-collapse: collapse;
     width: 100%;
   }
   .zebra-table th, .zebra-table td {
     border: 1px solid #ddd;
     padding: 12px;
   }
   .zebra-table tr:nth-child(even) {
     background-color: #f2f2f2;
   }

➤ Self-Check Questions

1. What property collapses double cell borders into single lines?
   • Answer: border-collapse: collapse;.
2. Under what condition is the border-spacing property valid?
   • Answer: Only when border-collapse is configured to separate.
3. What property controls table caption vertical positions?
   • Answer: caption-side.
4. How can you hide borders and backgrounds of empty table cells under separate border models?
   • Answer: Set empty-cells: hide.
5. What is the simplest way to prevent wide tables from breaking mobile layouts?
   • Answer: Wrap the table in a container styled with overflow-x: auto.
6. Can you zebra stripe table rows using pseudo-classes?
   • Answer: Yes, by styling rows with tr:nth-child(even) or tr:nth-child(odd).
7. What is the default value of border-collapse?
   • Answer: separate.
8. What does the attr() function do inside table cell styles?
   • Answer: It pulls string values from custom HTML attributes (e.g. data-label) to render them as pseudo-element content.
9. Which element represents table header cells?
   • Answer: <th>.
10. Does setting width: 100% on a table block prevent it from overflowing screen boundaries if column widths are fixed?
    • Answer: No, cell contents and fixed column widths override 100% width settings during layout overflows.