Thuộc tính table-layout trong CSS
Bùi Tấn Lực - 866
- 03/10/2025
Chức năng của Thuộc tính table-layout trong CSS
Thuộc tính table-layout trong CSS dùng để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau.
Cú pháp của Thuộc tính table-layout trong CSS
table-layout: giatri;
giatri: Giá trị để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau (Ví dụ: fixed, auto)
Các giá trị của Thuộc tính table-layout trong CSS
fixed: Canh chiều rộng các cột đều bằng nhau.
auto: Canh chiều rộng các cột tự động
Code Thuộc tính table-layout trong CSS
table-layout: fixed; Canh chiều rộng các cột đều bằng nhau
table-layout: auto; Canh chiều rộng các cột tự động
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính table-layout trong CSS</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;margin-bottom:15px}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<h1>Code Thuộc tính table-layout trong CSS</h1>
<p>Dùng để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau:</p>
<h2>table-layout: fixed; Canh chiều rộng các cột đều bằng nhau</h2>
<table style="table-layout: fixed;">
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị Vân</td>
<td>25.000.000VNĐ</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Thùy Dung</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>4</td>
<td>Trần Ngọc Thanh</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
</table>
<h2>table-layout: auto; Canh chiều rộng các cột tự động</h2>
<table style="table-layout: auto;">
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị Vân</td>
<td>25.000.000VNĐ</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Thùy Dung</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>4</td>
<td>Trần Ngọc Thanh</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
</table>
</body>
</html>
Cách sử dụng table-layout trong CSS hiệu quả
Thuộc tính table-layout nên được lựa chọn dựa trên cách bạn muốn trình duyệt tính toán kích thước các cột. Việc chọn đúng giá trị giúp bảng hiển thị ổn định hơn, đặc biệt khi dữ liệu có độ dài không đồng đều.
Khi nào nên dùng table-layout: auto và fixed?
table-layout: auto phù hợp với những bảng cần tự điều chỉnh kích thước cột theo nội dung. Đây là lựa chọn thuận tiện khi dữ liệu thay đổi thường xuyên và bạn muốn hạn chế việc phải quy định chiều rộng cho từng cột.
table-layout: fixed phù hợp khi cần kiểm soát bố cục bảng rõ ràng, chẳng hạn bảng dữ liệu có nhiều dòng hoặc cần hiển thị đồng đều trên giao diện. Trình duyệt có thể xác định bố cục cột nhanh hơn mà không cần dựa quá nhiều vào toàn bộ nội dung trong bảng.
table {
width: 100%;
table-layout: fixed;
}
th,
td {
width: 25%;
}
Với bảng có nội dung tương đối ổn định và yêu cầu bố cục nhất quán, fixed thường là lựa chọn hợp lý. Ngược lại, auto linh hoạt hơn khi độ dài dữ liệu khó dự đoán.
Những lưu ý khi thiết lập độ rộng cột với table-layout
Khi sử dụng table-layout: fixed, nên xác định chiều rộng bảng và phân bổ độ rộng cột một cách hợp lý. Nếu tổng không gian dành cho các cột quá chật, nội dung dài có thể làm giao diện khó đọc.
Nếu bảng chứa chuỗi văn bản dài, nên kết hợp cách xử lý nội dung phù hợp thay vì chỉ tăng chiều rộng cột. Điều này giúp bảng vẫn giữ được cấu trúc ổn định trên những màn hình có kích thước khác nhau.
table {
width: 100%;
table-layout: fixed;
}
td {
overflow-wrap: break-word;
}
Ngoài ra, không nên áp dụng table-layout: fixed cho mọi bảng một cách máy móc. Hãy ưu tiên auto khi nội dung quyết định trực tiếp đến độ rộng cột và chọn fixed khi sự ổn định của bố cục quan trọng hơn khả năng tự điều chỉnh.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính table-layout 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 *
