Responsive Table là bảng có thể thích ứng với nhiều kích thước màn hình khác nhau, từ máy tính để bàn đến thiết bị di động. Trên các thiết bị nhỏ hơn, bảng có thể trở nên khó đọc nếu không được tối ưu hóa. CSS giúp bạn làm cho bảng trở nên responsive bằng nhiều phương pháp khác nhau như cuộn ngang, ẩn bớt dữ liệu, hoặc chuyển đổi bố cục để phù hợp với màn hình nhỏ. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo bảng CSS Responsive với các ví dụ chi tiết.

1. Tại sao cần tạo table responsive?

Bảng là một cách tốt để trình bày dữ liệu có cấu trúc, nhưng trên thiết bị nhỏ, việc hiển thị đầy đủ bảng có thể gặp nhiều vấn đề:

  • Dữ liệu khó đọc hoặc bị cắt bớt.
  • Bảng chiếm toàn bộ chiều ngang màn hình gây khó chịu cho người dùng.
  • Phải cuộn nhiều để xem toàn bộ nội dung.

Giải pháp là làm cho bảng trở nên responsive, nghĩa là chúng có thể thích nghi với mọi kích thước màn hình mà vẫn giữ được tính dễ đọc và thân thiện với người dùng.

2. Cách đơn giản nhất: cuộn ngang

Một trong những cách đơn giản và hiệu quả nhất để làm bảng responsive là cho phép người dùng cuộn ngang bảng trên các thiết bị nhỏ. Bằng cách này, bảng vẫn hiển thị đầy đủ dữ liệu mà không bị bóp méo.

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Responsive | CodeTutHub</title>
    <style>
        /* Thiết lập table cơ bản */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        thead {
            background-color: #f8f8f8;
        }

        /* Cuộn ngang table khi màn hình nhỏ */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
        }
    </style>
</head>
<body>

    <div class="table-responsive">
        <table>
            <thead>
                <tr>
                    <th>Tên</th>
                    <th>Tuổi</th>
                    <th>Địa chỉ</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Nguyễn Văn A</td>
                    <td>25</td>
                    <td>Hà Nội</td>
                    <td>nguyenvana@example.com</td>
                </tr>
                <tr>
                    <td>Trần Thị B</td>
                    <td>30</td>
                    <td>TP HCM</td>
                    <td>tranthib@example.com</td>
                </tr>
                <tr>
                    <td>Phạm Văn C</td>
                    <td>28</td>
                    <td>Đà Nẵng</td>
                    <td>phamvanc@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Kết quả:

Trên các thiết bị có màn hình nhỏ (như di động), bảng sẽ có thể cuộn ngang, giúp giữ nguyên định dạng và không bị thu hẹp các cột.

3. Table Responsive với Media Queries

Một cách khác để tạo bảng responsive là sử dụng media queries. Bạn có thể thay đổi bố cục của bảng khi kích thước màn hình giảm xuống.

Ví dụ:

Dưới đây là một ví dụ về việc chuyển đổi bảng thành một dạng danh sách trên thiết bị di động để dễ đọc hơn:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Responsive với Media Queries | CodeTutHub</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        thead {
            background-color: #f4f4f4;
        }

        /* Media query cho màn hình nhỏ hơn 600px */
        @media (max-width: 600px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }

            thead {
                display: none;
            }

            tr {
                margin-bottom: 15px;
                border-bottom: 1px solid #ddd;
            }

            td {
                display: flex;
                justify-content: space-between;
                padding-left: 50%;
                position: relative;
            }

            td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 10px;
                font-weight: bold;
            }
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>Tên</th>
                <th>Tuổi</th>
                <th>Địa chỉ</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Tên">Nguyễn Văn A</td>
                <td data-label="Tuổi">25</td>
                <td data-label="Địa chỉ">Hà Nội</td>
                <td data-label="Email">nguyenvana@example.com</td>
            </tr>
            <tr>
                <td data-label="Tên">Trần Thị B</td>
                <td data-label="Tuổi">30</td>
                <td data-label="Địa chỉ">TP HCM</td>
                <td data-label="Email">tranthib@example.com</td>
            </tr>
            <tr>
                <td data-label="Tên">Phạm Văn C</td>
                <td data-label="Tuổi">28</td>
                <td data-label="Địa chỉ">Đà Nẵng</td>
                <td data-label="Email">phamvanc@example.com</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Giải thích:

  • Khi kích thước màn hình nhỏ hơn 600px, table sẽ chuyển từ dạng hiển thị cột truyền thống sang dạng hiển thị kiểu khối (block).
  • Bỏ thẻ <thead>: Phần tiêu đề của table sẽ bị ẩn đi, và thay vào đó chúng ta sử dụng thuộc tính data-label để hiển thị tên cột trước mỗi mục dữ liệu trong ô.
  • Thiết lập bố cục khối cho <td>: Tạo cảm giác mỗi ô dữ liệu giống như một dòng trong danh sách, giúp table trở nên dễ đọc hơn trên thiết bị nhỏ.

Kết quả:

Trên các thiết bị di động, table sẽ hiển thị giống một danh sách dọc, với mỗi ô được đánh nhãn giúp người dùng dễ dàng hiểu dữ liệu hơn.

4. Sử dụng Framework Bootstrap để tạo Table Responsive

Nếu bạn sử dụng Bootstrap, việc làm table responsive trở nên cực kỳ đơn giản. Bootstrap cung cấp class .table-responsive để dễ dàng tạo table cuộn ngang khi trên màn hình nhỏ.

Ví dụ sử dụng Bootstrap:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Responsive với Bootstrap | CodeTutHub</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container mt-4">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Tên</th>
                        <th>Tuổi</th>
                        <th>Địa chỉ</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Nguyễn Văn A</td>
                        <td>25</td>
                        <td>Hà Nội</td>
                        <td>nguyenvana@example.com</td>
                    </tr>
                    <tr>
                        <td>Trần Thị B</td>
                        <td>30</td>
                        <td>TP HCM</td>
                        <td>tranthib@example.com</td>
                    </tr>
                    <tr>
                        <td>Phạm Văn C</td>
                        <td>28</td>
                        <td>Đà Nẵng</td>
                        <td>phamvanc@example.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

Giải thích:

  • .table-responsive: Tự động tạo cuộn ngang cho table trên các thiết bị có màn hình nhỏ.
  • .table và .table-bordered: Bootstrap cung cấp các class này để định dạng table với đường viền rõ ràng và giao diện đẹp mắt.

Kết quả:

Khi trên thiết bị nhỏ, table sẽ tự động có thanh cuộn ngang, đảm bảo rằng tất cả dữ liệu vẫn được hiển thị đầy đủ.

5. Kết luận

Responsive tables giúp hiển thị dữ liệu dễ đọc trên mọi kích thước màn hình. Với CSS, bạn có thể thực hiện nhiều cách khác nhau để table trở nên responsive, từ việc cuộn ngang đến thay đổi bố cục của table. Các framework như Bootstrap cũng cung cấp các công cụ sẵn có để giúp bạn tạo table responsive một cách nhanh chóng và hiệu quả.

Hãy thử nghiệm các ví dụ này và áp dụng cho trang web Codetuthub.com để tạo ra các table dữ liệu đẹp mắt, dễ đọc và thân thiện với người dùng trên mọi thiết bị!