Tạo bảng responsive tuyệt đẹp cho blogger - blogspot

Bài viết sẻ hướng dẫn bạn thêm bảng hay table responsive tương thích hiện thị trên các thiết bị di động theo chuẩn HTML5.
Bạn có thể follow theo một số bước đơn giản như sau.
Chèn đoạn code css này vào trước thẻ style hoặc ]]></b:skin> trong phần chỉnh sửa HTML theme

table{background-color:transparent;width:100%;max-width:100%;margin-bottom:20px}
table img{width:100%;height:auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0}
th{text-align:left}
.table{width:100%;max-width:100%;margin-bottom:20px}
.table a{text-decoration:none!important}
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{padding:8px;line-height:1.42857143;vertical-align:top}
.table > thead > tr > th{background-color:#3498DB;color:#fff;vertical-align:bottom}
.table > thead > tr > th a{color:#fff!important}
.table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0}
.table > tbody > tr:nth-of-type(odd){background-color:#f9f9f9}
table col[class*="col-"]{position:static;display:table-column;float:none}
table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none}
.table-responsive{min-height:.01%;overflow-x:auto}
@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive > .table{margin-bottom:0}.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{white-space:nowrap}.table-responsive > .table-bordered{border:0}}

Lưu mẫu lại là xong.
Bây giờ nếu muốn chèn bảng vào bài viết thì bạn soạn thảo bài viết ở chế độ HTML rồi dán đoạn code HTML này vào.

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Họ Tên</th>
<th>Chức vụ</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Tỉnh</td>
<td>Admin</td>
</tr>
<tr>
<td>Nguyễn Tỉnh</td>
<td>Admin</td>
</tr>
<tr>
<td>Nguyễn Tỉnh</td>
<td>Admin</td>
</tr>
</tbody>
</table>
</div>

Kết quả sẻ như dưới đây:

Họ Tên	Chức vụ
Nguyễn Tỉnh	Admin
Nguyễn Tỉnh	Admin
Nguyễn Tỉnh	Admin

Những câu hỏi thường gặp

Làm thế nào để tải về?

Nếu bạn chưa tải file thông qua link rút gọn bao giờ, thì bạn có thể xem hướng dẫn để tải về.

Tệp tin tải về không đúng với mô tả?

Nếu có sự nhầm lẫn giữa mô tả và tệp tin tải về, vui lòng báo lỗi với chúng tôi thông qua mục liên hệ dưới cuối trang.

Link hỏng?

Nếu bạn gặp vấn đề về liên kết ví dụ như tệp không tồn tại, không thể truy cập,...vui lòng báo cáo với quản trị viên.

Tôi không thể mở và chỉnh sửa file psd?

Vui lòng xem hướng dẫn nếu bạn chưa biết cách mở file psd và edit nó.