Tạo responsive table (bảng đáp ứng) bằng css cho blogspot

Khi trình bày một bảng biểu với khổ rộng lớn nếu chúng ta sử dụng cách thông thường thì nội dung trong bảng sẽ bị che đi không hiển thị hết đối với những màn hình có độ phân giải thấp. Để khắc phục các bạn sử dụng code css sau đây nhé.

Đầu tiên: các bạn chèn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>

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;}
}

Và sau đó chèn đoạn code sau vào bài viết để hiển thị bảng:

<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>Nội dung 1</th>
    <th>Nội dung 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Nội dung A</td>
    <td>Nội dung B</td>
  </tr>
  <tr>
    <td>Nội dung C</td>
    <td>Nội dung D</td>
  </tr>
  <tr>
    <td>Nội dung E</td>
    <td>Nội dung F</td>
  </tr>
</tbody>
</table>
</div>

Khá là đơn giản đúng không nào, chỉ vài bước đơn giản là các bạn có thể tạo được một bảng bằng css tương thích với mọi thiết bị xem rồi.
Chúc các bạn thành công. Nếu thấy hữu ích hãy để lại 1 comment để ủng hộ mình nhé.
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam