Chia sẻ CSS tạo Table có khả năng Responsive
Minh Khang 5 năm trước

Chia sẻ CSS tạo Table có khả năng Responsive

Hôm nay, mình chia sẻ 1 đoạn CSS đẹp dành cho Table và có khả năng Responsive – tương thích với mọi thiết bị.

Trước tiên mình tạo 1 bảng như thế này:

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Tính năng</th> <th>Khả dụng</th> </tr>
<tr> <td>Xem mẫu</td> <td><b><a target="_blank" href="http://www.ohvn.info">Nhấp vào để xem mẫu</a></b></td> </tr>
<tr> <td>Responsive</td> <td>Có</td> </tr>
<tr> <td>Tải nhanh</td> <td>Có</td> </tr>
<tr> <td>Thiết kế thanh lịch</td> <td>Có</td> </tr>
<tr> <td>Bài viết xem nhiều</td> <td>Có</td> </tr>
<tr> <td>Bài viết ngẫu nhiên</td> <td>Có</td> </tr>
<tr> <td>Sticky trượt</td> <td>Có</td> </tr>
<tr> <td>LightBox đẹp</td> <td>Có</td> </tr>
<tr> <td>Hỗ trợ cài đặt, hướng dẫn sử dụng</td> <td>Có</td> </tr>
<tr> <td>Cách sử dụng JwPlayer để post phim</td> <td>Có</td> </tr>
<tr> <td>Giá giao diện Premium</td> <td><b>350.000 VNĐ</b></td> </tr>
</tbody> </table>

Bạn thêm CSS này vào trong thẻ <style>

.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 lưu lại và ngồi xem thành quả nha.

168 lượt xem | 0 Bình luận
Tôi là Minh Khang là một tác giả trên web allfreevn.com. Tôi chuyên viết bài viết trong lĩnh vực Công nghệ thông tin và game. Tôi là một chuyên gia có kinh nghiệm và đam mê trong lĩnh vực này, với kiến thức sâu và khả năng áp dụng linh hoạt, tôi đã viết nhiều bài viết chất lượng về các khía cạnh khác nhau của công nghệ thông tin như thủ thuật, hướng dẫn cách làm thế nào... Cám ơn các bạn xem bài viết của tôi.

Bình luận gần đây