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

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

Hiện có 16 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Qc trong baif viết kích thước bn là chuẩn v a

    Trả lờiXóa
    Trả lời
    1. để kích thước tự động, adsense nó tự điều chỉnh cho phù hợp

      Xóa
    2. Là phần phản hồi đó hả a

      Xóa
    3. là sao? fb.com/vanthin07 inb để hỗ trợ nếu rảnh

      Xóa
Gợi ý cho bạn: