Home
thủ-thuật-blog

Tạo Table có khả năng Responsive

#tao table, #table responsive
Responsive Table - cho phép tạo ra các bảng dễ dàng nhìn rõ và hiển thị một cách tốt trên các thiết bị khác nhau.
Trong bài viết này, mình sẽ hướng dẫn các bạn 02 cách để tạo Responsive Table trong blog.

#Demo

Tiêu đề Nội dung Ghi chú
Tiêu đề 1 Nội dung 1 Note 1
Tiêu đề 2 Nội dung 2 ...
Tiêu đề 3 Nội dung 3 ...
Liên kết Nhấp vào liên kết

#1.Thêm CSS

Đầu tiên bạn thêm đoạn .css dưới đây vào trước thẻ ]]></b:skin> 
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top}
.post-body table th{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container{border:1px solid #e9e9e9}
.post-body table caption{border:none;font-style:italic}
.post-body td,.post-body th{vertical-align:top;text-align:left;padding:3px 5px}
.post-body table tr:nth-child(even) > td{background-color:#f9f9f9}
.post-body table tr:nth-child(even) > td:hover{background-color:#fbfbfb}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase}
.post-body th:hover{background:#fdfdfd}
.post-body td a{color:green;padding:0 6px;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover{color:#7f9bdf;border-color:#adbce0}
.post-body td a[target="_blank"]:after{margin-left:5px}
.post-body table.tr-caption-container td{border:none;padding:8px}
.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}
.post-body td.tr-caption{padding:0 8px 8px!important}
img{max-width:100%;height:auto;border:none}
table{max-width:100%;width:100%;margin:1.5em auto}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
- Bạn có thể để nguyên hoặc tùy chỉnh lại các thông số theo ý bạn.
Sau đó nhấn Lưu.

#Hướng dẫn dùng trong bài viết

Trong phần bài viết, bạn chuyển sang Chế độ xem HTML và sử dụng đoạn code dưới để tạo bảng. 
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr> 
  <th><b><span style="color: #ff3a56;">Tiêu đề</span></b></th> 
  <th><b><span style="color: #ff3a56;">Nội dung</span></b></th> 
  <th><b><span style="color: #ff3a56;">Ghi chú</span></b></th>
</tr>
  <tr> <th>Tiêu đề 1</th> <th>Nội dung 1</th> <th>Note 1</th></tr>
  <tr> <th>Tiêu đề 2</th> <th>Nội dung 2</th> <th>...</th></tr>
  <tr> <th>Tiêu đề 3</th> <th>Nội dung 3</th> <th>...</th></tr>
  <tr> <td>Liên kết</td> <td><b><a href="#link_liên_kết" target="_blank">Nhấp vào liên kết</a></b></td> </tr>
</tbody> 
</table>
- Bạn tùy chỉnh số lượng hàng và cột theo nhu cầu tạo bảng của bạn cho phù hợp.

#2.Dùng Tool

Để đơn giản hơn trong việc tạo bảng, bạn có thể sử dụng Tool.
Bạn truy cập vào Tables Generator
Tại đây bạn thực hiện việc tạo bảng thao tác như trong M.Word or Excel.
Sau khi hoàn thành xong việc tạo bảng, bạn chỉ việc copy mã đó lại và paste vào phần bài viết của bạn.