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

BaoTrongITBà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 ...

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

• Pass giải nén (nếu có)
  • Tất cả các file .Rar trên website pass: www.baotrongit.com
• Tắt bật Windows Defender
  • Các file setup đều đã Active sẵn nên sẽ có xung đột với hệ thống diệt virut nên bạn cần tắt trước khi cài đăt phần mềm về máy, xem hướng dẫn Tắt bật Windows Defender dễ dàng và nhanh chóng.
• Báo lỗi link hỏng
  • Bạn có thể báo lỗi link hỏng, link die tại phần Bình luận hoặc có thể Liên hệ với tôi để khắc phục sự cố sớm nhất.
• Tại sao không tải được file?
  • Có 2 trường hợp nếu lỗi link bạn có thể báo lỗi link hỏng ở phía trên
    Trường hợp file đã quá số lần tải trên Google Drive bạn có thể xem hướng dẫn tại đây để tải được file về máy.