Gộp viền bảng (Collapse Table Borders) bằng CSS

Để gộp viền bảng, sử dụng thuộc tính border-collapse trong CSS.

Ví dụ 1: Có viền cho ô

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
th, td {
  border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table>
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</th></tr>
  <tr><td>India</td><td>1</td><td>200</td></tr>
  <tr><td>England</td><td>2</td><td>180</td></tr>
  <tr><td>Australia</td><td>3</td><td>150</td></tr>
  <tr><td>NewZealand</td><td>4</td><td>130</td></tr>
  <tr><td>SouthAfrica</td><td>5</td><td>100</td></tr>
  <tr><td>WestIndies</td><td>6</td><td>80</td></tr>
  <tr><td>Pakistan</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

Kết quả

Ví dụ 2: Chỉ viền bảng, không viền ô

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table>
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</th></tr>
  <tr><td>India</td><td>1</td><td>200</td></tr>
  <tr><td>England</td><td>2</td><td>180</td></tr>
  <tr><td>Australia</td><td>3</td><td>150</td></tr>
  <tr><td>NewZealand</td><td>4</td><td>130</td></tr>
  <tr><td>SouthAfrica</td><td>5</td><td>100</td></tr>
  <tr><td>WestIndies</td><td>6</td><td>80</td></tr>
  <tr><td>Pakistan</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

Kết quả

Giải thích:

• border-collapse: collapse gộp các viền liền kề thành một đường viền duy nhất
• Mặc định là separate (viền tách biệt)
• Khi collapse, border-spacing bị bỏ qua