Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Chủ Nhật, 25 tháng 9, 2016

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>

0 nhận xét

Đăng nhận xét