9.1 Cuộn (Scroll)
Bảng thường được sử dụng để hiển thị dữ liệu có cấu trúc, nhưng có thể khó hiển thị trên các thiết bị có màn hình nhỏ. Bảng đáp ứng cho phép cải thiện cách người dùng nhận thức và tương tác với dữ liệu trên các thiết bị khác nhau, bao gồm điện thoại di động và máy tính bảng. Hãy cùng xem qua một vài kỹ thuật để tạo bảng đáp ứng nhé.
Một trong những phương pháp đơn giản để tạo bảng đáp ứng là thêm cuộn ngang. Phương pháp này giữ nguyên cấu trúc của bảng và cho phép người dùng cuộn dữ liệu theo chiều ngang trên các màn hình hẹp.
Ví dụ:
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng đáp ứng với cuộn</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
<th>Cột 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
<!-- Các dòng khác -->
</tbody>
</table>
</div>
</body>
</html>
Giải thích mã:
.table-container: thêm cuộn ngang nếu bảng vượt quá chiều rộng của containertable: đặt chiều rộng của bảng là 100% và gộp các đường viền của ô
9.2 Ẩn cột (Column Hiding)
Phương pháp này là ẩn các cột ít quan trọng hơn trên màn hình hẹp để các dữ liệu chính vẫn còn có thể thấy được. Việc này có thể thực hiện bằng cách sử dụng media query.
Ví dụ:
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng đáp ứng với ẩn cột</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th class="hide">Cột 3</th>
<th class="hide">Cột 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
<td class="hide">Dữ liệu 3</td>
<td class="hide">Dữ liệu 4</td>
</tr>
<!-- Các dòng khác -->
</tbody>
</table>
</body>
</html>
Giải thích mã:
.hide: ẩn các cột nhất định trên màn hình có chiều rộng nhỏ hơn 600px bằng cách sử dụng media querytable: đặt chiều rộng của bảng là 100% và gộp các đường viền của ô
9.3. Chuyển thành khối (Stacking)
Chuyển thành khối biến các dòng của bảng thành các khối, hiển thị theo chiều dọc trên màn hình hẹp. Điều này giúp bảng dễ đọc hơn trên thiết bị di động.
Ví dụ:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng đáp ứng với khối</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
<th>Cột 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Cột 1">Dữ liệu 1</td>
<td data-label="Cột 2">Dữ liệu 2</td>
<td data-label="Cột 3">Dữ liệu 3</td>
<td data-label="Cột 4">Dữ liệu 4</td>
</tr>
<!-- Các dòng khác -->
</tbody>
</table>
</body>
</html>
Giải thích mã:
- Media queries: chuyển đổi bảng thành khối trên màn hình có chiều rộng nhỏ hơn 600px
td::before: thêm một phần tử giả với tên cột trước mỗi giá trị ô để giữ nguyên ngữ cảnh dữ liệu
9.4. Biến đổi thành card (Card Layout)
Phương pháp này chuyển đổi từng dòng của bảng thành một card riêng biệt trên màn hình hẹp. Điều này giúp cải thiện khả năng đọc dữ liệu trên thiết bị di động.
Ví dụ:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng đáp ứng với card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
<th>Cột 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Cột 1">Dữ liệu 1</td>
<td data-label="Cột 2">Dữ liệu 2</td>
<td data-label="Cột 3">Dữ liệu 3</td>
<td data-label="Cột 4">Dữ liệu 4</td>
</tr>
<!-- Các dòng khác -->
</tbody>
</table>
</body>
</html>
Giải thích mã:
- Media queries: chuyển đổi bảng thành khối và tạo card trên màn hình có chiều rộng nhỏ hơn 600px
td::before: thêm một phần tử giả với tên cột trước mỗi giá trị ô để giữ nguyên ngữ cảnh dữ liệu
9.5 Sử dụng CSS Frameworks
Nhiều CSS frameworks, chẳng hạn như Bootstrap, cung cấp các giải pháp sẵn có để tạo bảng đáp ứng. Sử dụng các frameworks này giúp đơn giản hóa quy trình và cung cấp các kiểu dáng và thành phần sẵn có.
Ví dụ sử dụng Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bảng đáp ứng với Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
<th>Cột 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
<!-- Các dòng khác -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Giải thích mã:
table.table-responsive: lớp Bootstrap, thêm cuộn ngang cho bảng trên màn hình hẹpcontainer: lớp Bootstrap để căn giữa và đặt chiều rộng tối đa cho container
GO TO FULL VERSION