Hướng dẫn tạo Responsive table với CSS cho Blogger

Hướng dẫn tạo Responsive table với CSS cho Blogger

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 bạn hãy làm theo hướng dẫn dưới đây:
Trước tiên bạn cần đăng nhập vào Blogger > edit Template. Sau đó chèn đoạ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à chèn đoạn code sau vào bài viết của bạn:

<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>Nama Pertama</th>
    <th>Nama Terakhir</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Gian</td>
    <td>MR</td> 
  </tr>
  <tr>
    <td>Kaka</td>
    <td>Slank</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Lennon</td>
  </tr>
</tbody>
</table>
</div>

See the Pen Responsive table with CSS by ducnguyen (@ducrat) on CodePen.

Nguồn bài viết: gianmr.com