Thuộc tính border-collapse | CSS - xác định đường viền của table có tách biệt ra hay khô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:
<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ên 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ên trình duyệt khi có CSS:

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

Không có nhận xét nào:

Đăng nhận xét