Khi con trai cần...

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

Bài viết ngẫu nhiên

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é.
Niemstyle | Tạo responsive table (bảng đáp ứng) bằng css cho blogspot
Đầ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é.

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Hướng dẫn ping sitemap đê a ơi .-. làm trên mạng mà không thấy seo lên được chút nào :P sẵn tiện bài viết oke lắm

    Trả lờiXóa
    Trả lời
    1. Đợi đi a sẽ làm 1 bài chi tiết về cách SEO mới.

      Xóa
  2. Cái này làm bảng thông tin template là hết ý luôn

    Trả lờiXóa
  3. Bài mới đi :v em F5 4 phút rồi chưa thấy gì

    Trả lờiXóa
    Trả lời
    1. từ từ em, ở đâu mà làm liền hoài đc :3

      Xóa
  4. Trả lời
    1. trời bài mới cách có 2 ngày kêu bài mới nữa hả @@

      Xóa