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
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}}
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>
Họ Tên | Chức vụ |
---|---|
Nguyễn Tỉnh | Admin |
Nguyễn Tỉnh | Admin |
Nguyễn Tỉnh | Admin |
Thông báo !:
=========
Mình cần bán web và app này. Mọi người cần liên hệ nhé
=========
Nháy đúp liên tục nút [‣] để phát video
Liên hệ QUẢNG CÁO, góp ý, báo lỗi ➤ Tại Đây
=========
Các bạn đang xem truyền hình trực tuyến trên tại ứng dụng TiVi 5G - Trang Xem Tivi online tốt nhất, ổn định nhất, đáp ứng nhiều người truy cập cùng lúc. Xem Tạo bảng responsive tuyệt đẹp cho blogger - blogspot - Tivi Online Tạo bảng responsive tuyệt đẹp cho blogger - blogspot - Xem Tạo bảng responsive tuyệt đẹp cho blogger - blogspot Chất Lượng Cao.