Thuộc tính border-collapse

Đăng bởi: Admin

Đị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ợ

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.

Link liên quan

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!