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:

1.bước 1

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

Ở dòng lệnh    table {border-spacing: 0;border-collapse: collapse;} 
các bạn có thể thay đổi nó để trở thành như sau để như mình khi nhồi code vào như khung phía trên thì có ô màu bao quanh cho độc giả biết rõ sự bắt đầu và kết thúc của dòng lệnh.
cho nó đẹp và chuyên nghiệp hơn .Thiếu  1 dấu chấm phẩy cũng có thể không chạy rồi. Mình đã thay đổi dòng này như sau:
table {border-spacing: 0;border-collapse: collapse; border-color: #800000; border-width: medium;} 
còn thuộc tính border-cllapse : collapse ; là loại bỏ đường viền trong bảng nên mình bỏ đi

2. Bước 2
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>

các bạn lưu ý nhá nếu các bạn muốn chèn code vào khung , mà khung này chỉ cần  như 2 khung trên đây của mình thì các bạn sửa lại 1 chút như sau
<thead> là tiêu đề bảng cũng bỏ đi . .  Và chỉ có 1 cột nên trong cặp thẻ <tr>  và </tr>
cũng chỉ  cần 1 cặp thẻ <td></td> thôi

<div class="table-responsive">
<table class="table">
<tbody>
  <tr>
    <td> Hãy nhập code vào đây  </td>
  </tr>
  </tbody>
</table>
</div>

Bài này mình sưu tầm từ trang upsoft-grid  nhưng nó thấy hay quá nên chép lại và mình cũng đã thử , sửa theo ý mình rồi. Tuy nhiên mình dùng cái bảng đơn( 1 hàng , 1 cột )  để nhồi code  và cho màu khung viền bảng thì có lúc được có lúc  không. Lúc nào có vẻ không được thì mình nhồi code vào bảng đơn( 1 hàng , 1 cột)  ở trên Win Word . Rồi sau đó  copy  cả bảng  liền dữ liệu bên trong đó
 thế là  được khung chứa code cho Template Responsive  cho blogspots.  Template Responsive  giờ hay dùng lắm  chứ template nguyên thủy của google chán lắm. Trên mạng có rất nhiều hướng dẫn tạo khung, bảng nhưng đây là tạo khung(bảng)  Responsive  có rất ít nên chia sẻ lại cho người nào muốn dùng đến . Nếu thích hãy chia sẻ bài viết này nhé
Chúc các bạn thành công 

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share