Thuộc tính border-collapse

Định nghĩa và sử dụng

Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không.

Chú ý là thuộc tính border-collapse chỉ được sử dụng cho thành phần table.

Cấu trúc

table {
    border-collapse: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
border-collapse collapse border-collapse: collapse; Khoảng trống giữa các đường viền (border) của table bị loại bỏ, chỉ còn đường viền duy nhất.
separate border-collapse: separate; Khoảng trống giữa các đường viền (border) của table vẫn giữ nguyên, đây là dạng mặc định của table.
inherit border-collapse: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html border="1">
<head></head>
<body>
<table>
<tr>
<th>Thu hai</th>
<th>Thu ba</th>
</tr>

<tr>
<td>2000d</td>
<td>5000d</td>
</tr>

<tr>
<td>500d</td>
<td>4000d</td>
</tr>
</table>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Thu hai Thu ba
2000d 5000d
500d 4000d

CSS viết:

table {
    border-collapse: collapse; 
}

Hiển thị trình duyệt khi có CSS:

Thu hai Thu ba
2000d 5000d
500d 4000d

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính border-collapse được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không được hỗ trợ trong trình duyệt Internet Explorer, bao gồm cả IE9.