Tạo table có khả năng Responsive

Table là 1 thành phần thường xuyên xuất hiện và không thể thiếu khi xây dựng các trang HTML/CSS để hiển thị nội dung dưới dạng bảng. Tuy nhiên, vấn đề xử lý để table hiển thị nội dung đầy đủ và rõ ràng cho các thiết bị mobile là 1 vấn đề khá nan giải, vì các thiết bị mobile có kích thước màn hình khá nhỏ.

Ví dụ, ta có 1 table với số column ít thì vấn đề hiển thị nội dung của bảng trên mobile có vẻ như không có gì đáng lo. Nhưng nếu chúng ta xây dựng 1 table có số lượng column lớn, hàng chục thậm chí hàng trăm column thì khi hiển thị nội dung của table trên mobile thật là thảm họa.

Xem Demo
 DEMO
Thật ra để xử lý vấn đề này khá đơn giản, bạn chỉ cần để table nằm trong 1 div, sử dụng thuộc tính css overflow-x để tạo thanh scrollbar. Cách làm chi tiết như sau

I. Sử dụng nền tảng blogger

Viết css cơ bản

.post-body table{font-size: 15px;max-width:100%;width:100%;border-spacing:0;border-collapse:collapse}
.post-body table td,.post-body table caption{border:1px solid #ddd;padding:5px 10px;text-align:left;vertical-align:top}
.post-body table th{border:1px solid #ddd;padding:10px;text-align:left;vertical-align:top}
.post-body td,.post-body th{vertical-align:top;text-align:left;padding:3px 5px}
.post-body table tr:nth-child(even) > td{background-color:#f9f9f9}
.post-body table tr:nth-child(even) > td:hover{background-color:#fbfbfb}
.post-body th{background:#fff}
.post-body th:hover{background:#fdfdfd}
.res-table{overflow-x: auto}

Cấu trúc khi tạo bảng

<div class='res-table'>
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
</div>

* Trường hợp bạn đã có nhiều bài viết sử dụng bảng và ngại chỉnh sửa lại cấu trúc

Lúc này sẽ bạn sẽ cần dùng đến js để chèn table vào thẻ div, code js có dạng

<script type='text/javascript'>//<![CDATA[ 
for (var tables = document.querySelectorAll(".post-body table"), i = 0; i < tables.length; i++) {
     var table = tables[i],
         table_div = document.createElement("div");
     table.parentElement.insertBefore(table_div, table), table_div.className = "res-table", table_div.appendChild(table)
}
//]]></script>

Cấu trúc khi tạo bảng

<table>
    <tr>
        <td></td>
    </tr>
</table>

II. Sử dụng nền tảng khác

Viết css cơ bản

table{font-size: 15px;max-width:100%;width:100%;border-spacing:0;border-collapse:collapse}
table td,table caption{border:1px solid #ddd;padding:5px 10px;text-align:left;vertical-align:top}
table th{border:1px solid #ddd;padding:10px;text-align:left;vertical-align:top}
td,th{vertical-align:top;text-align:left;padding:3px 5px}
table tr:nth-child(even) > td{background-color:#f9f9f9}
table tr:nth-child(even) > td:hover{background-color:#fbfbfb}
th{background:#fff}
th:hover{background:#fdfdfd}
.res-table{overflow-x: auto}

Cấu trúc khi tạo bảng

<div class='res-table'>
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
</div>

* Trường hợp bạn đã có nhiều bài viết sử dụng bảng và ngại chỉnh sửa lại cấu trúc

Lúc này sẽ bạn sẽ cần dùng đến js để chèn table vào thẻ div, code js có dạng

<script type='text/javascript'>//<![CDATA[ 
for (var tables = document.querySelectorAll("table"), i = 0; i < tables.length; i++) {
     var table = tables[i],
         table_div = document.createElement("div");
     table.parentElement.insertBefore(table_div, table), table_div.className = "res-table", table_div.appendChild(table)
}
//]]></script>

Cấu trúc khi tạo bảng

<table>
    <tr>
        <td></td>
    </tr>
</table>

KẾT LUẬN: Với các blog chuyên về chia sẻ template thì việc tạo bảng như cơm bữa, nếu bạn không để ý đến phần responsive rất có thể sẽ mất điểm trước người dùng mobile. Với cách tạo responsive đơn giản này bạn sẽ không cần lo ngại vấn đề vỡ bố cục bảng nữa

Chúc bạn thành công !