Thuộc tính border-collapse trong CSS
Bùi Tấn Lực - 899
- 12/10/2025
Chức năng của Thuộc tính border-collapse trong CSS
Thuộc tính border-collapse trong CSS dùng để quy định cách các đường viền của các ô td và table có nối liền thành 1 đường viền duy nhất hay tách biệt.
Cú pháp của Thuộc tính border-collapse trong CSS
border-collapse: giatri;
giatri: Giá trị này dùng để quy định cách các đường viền của các ô td và table có nối liền thành 1 đường viền duy nhất hay tách biệt (separate, collapse)
Các giá trị của Thuộc tính border-collapse trong CSS
separate: Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác.
collapse: Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất.
Code Thuộc tính border-collapse trong CSS
border-collapse: collapse; Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất
border-collapse: separate; Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-collapse trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
table, td, th {
border: 1px solid black;
}
table {margin-bottom:30px;width:100%}
caption {font-size:px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-collapse trong CSS</h1>
<p>border-collapse: separate; Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác:</p>
<table style="border-collapse: separate;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
<p>border-collapse: collapse; Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất:</p>
<table style="border-collapse: collapse;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
</body>
</html>
Cách sử dụng border-collapse trong thiết kế bảng CSS
Việc chọn giá trị cho border-collapse nên dựa trên cách bạn muốn hiển thị đường viền giữa các ô trong bảng. Hai giá trị thường dùng là collapse và separate, mỗi cách phù hợp với một kiểu giao diện khác nhau.
Khi nào nên sử dụng border-collapse: collapse
Nên dùng border-collapse: collapse khi muốn các đường viền liền kề giữa các ô được gộp thành một đường duy nhất. Cách này đặc biệt phù hợp với bảng dữ liệu, bảng thống kê hoặc các giao diện cần bố cục gọn gàng.
Khi sử dụng giá trị này, khoảng cách trực quan giữa các ô được loại bỏ, giúp bảng có cảm giác liền mạch và dễ theo dõi hơn.
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
Đây thường là lựa chọn phù hợp khi bảng có nhiều hàng và cột, bởi đường viền đơn giúp giảm cảm giác rối mắt và giữ cho nội dung được phân tách rõ ràng.
Khi nào nên sử dụng border-collapse: separate
Nên dùng border-collapse: separate khi muốn mỗi ô trong bảng giữ đường viền riêng và có thể tạo khoảng cách giữa các ô. Đây là lựa chọn phù hợp với những thiết kế cần cảm giác thoáng hoặc muốn tạo hiệu ứng từng ô độc lập.
table {
width: 100%;
border-collapse: separate;
border-spacing: 8px;
}
th,
td {
border: 1px solid #ddd;
padding: 10px;
}
Điểm đáng chú ý là khi sử dụng separate, bạn có thể kiểm soát khoảng cách giữa các ô thông qua border-spacing. Vì vậy, cách này linh hoạt hơn khi thiết kế bảng theo phong cách thẻ hoặc các giao diện cần nhiều khoảng trống.
Kết hợp border-collapse với border-spacing trong CSS
border-spacing dùng để thiết lập khoảng cách giữa các ô khi bảng sử dụng border-collapse: separate. Hai thuộc tính này có mối liên hệ trực tiếp nên cần chọn cách thiết lập phù hợp với nhau.
table {
width: 100%;
border-collapse: separate;
border-spacing: 6px 10px;
}
td {
border: 1px solid #ddd;
padding: 10px;
}
Trong ví dụ trên, giá trị thứ nhất của border-spacing tạo khoảng cách theo chiều ngang, còn giá trị thứ hai áp dụng cho chiều dọc. Nếu bảng cần các ô sát nhau, nên ưu tiên collapse; nếu muốn tạo khoảng trống rõ ràng giữa từng ô, có thể sử dụng separate kết hợp với border-spacing.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-collapse trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
