Gộp viền bảng (Collapsing Table Borders) trong CSS

Thuộc tính CSS border-collapse được dùng để chỉ định các phần tử <table> có chung viền (shared borders) hay viền riêng biệt (separate borders). Nó nhận hai giá trị: separate (mặc định) và collapse.

Cú pháp

Selector {
  border-collapse: /*value*/
}

Ví dụ 1: Collapse vs Separate border

<!DOCTYPE html>
<html>
<head>
<style>
  #cdemo { border-collapse: collapse; }
  #sdemo { border-collapse: separate; }
  table { display: inline-table; margin: 30px; }
  th, td { border: 3px ridge orange; }
  td { border-color: red; }
  caption { box-shadow: 0px -5px 4px 3px green; }
</style>
</head>
<body>
  <h2>Employee Records</h2>
  <table id="sdemo">
    <caption> Employee Details (Separate Border) </caption>
    <tr><th>Employee</th><th>Department</th></tr>
    <tr><td>Tim</td><td>Operations</td></tr>
    <tr><td>Nathan</td><td>Finance</td></tr>
    <tr><td>John </td><td>Marketing</td></tr>
  </table>
  <table id="cdemo">
    <caption> Employee Details (Collapse Border) </caption>
    <tr><th>Employee</th><th>Department</th></tr>
    <tr><td>Tim</td><td>Operations</td></tr>
    <tr><td>Nathan</td><td>Finance</td></tr>
    <tr><td>John </td><td>Marketing</td></tr>
  </table>
</body>
</html>

Kết quả

Ví dụ 2: Border-collapse với empty-cells

<!DOCTYPE html>
<html>
<head>
<style>
  table { border-collapse: separate; empty-cells: hide; display: inline-table; margin: 30px; }
  table+table { border-collapse: collapse; empty-cells: hide; }
  td { border: 3px ridge lightblue; }
  caption { box-shadow: 0px -5px 4px 3px grey; }
</style>
</head>
<body>
  <h2>Demo Tables</h2>
  <table>
    <caption>Demo caption</caption>
    <tr><td>demo</td><td>demo</td></tr>
    <tr><td>demo</td><td>demo</td></tr>
    <tr><td>demo</td><td>demo</td><td></td></tr>
  </table>
  <table>
    <caption>Demo caption</caption>
    <tr><td>demo</td><td>demo</td></tr>
    <tr><td>demo</td><td>demo</td></tr>
    <tr><td>demo</td><td>demo</td><td></td></tr>
  </table>
</body>
</html>

Kết quả

So sánh:

Lưu ý: Với collapse, border-style: inset hiển thị như groove, outset như ridge.