Chia sẻ CSS tạo Table có khả năng Responsive
admin 4 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.

34 lượt xem | 0 Bình luận
Hiện tại tác giả vẫn chưa cập nhật chia sẻ của mình



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

https://allfreevn.com
adhella 19 phút trước
Immunohistochemistry shows lesser labeling of ОІENaC in the lithium treated rats compared to that in the controls what are kamagra tablets...
https://allfreevn.com
KtatsReidsen 2 giờ trước
get lyrica for sale buying cheap lyrica price where to get cheap lyrica pill...
https://allfreevn.com
TeoCeada 13 giờ trước
[url=http://tetracyclinetabs.com/]tetracycline 500mg cost[/url]...
https://allfreevn.com
TedCeada 17 giờ trước
[url=https://prednisonetb.com/]generic prednisone cost[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://bupropion.directory/]2018 wellbutrin[/url] [url=https://zoloft2023.com/]zoloft generic brand[/url] [url=https://pleasantspharmacy.com/]online pharmacy non prescription drugs[/url] [url=https://dapoxetine.cyou/]buy priligy uk[/url] [url=https://cialisip.com/]otc generic cialis[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://erythromycintabs.online/]erythromycin 250mg tab[/url] [url=https://zoloft.wiki/]cheap zoloft online[/url] [url=https://cialisip.com/]cialis 10 mg tablet cost[/url]...
https://allfreevn.com
JosephEroLf 1 ngày trước
[url=https://anafranil.cyou/]anafranil 10mg tablets[/url] [url=https://antabuse.ink/]buy generic antabuse[/url] [url=https://anafraniltab.shop/]anafranil ocd[/url] [url=https://abilifytab.shop/]10 mg abilify price[/url] [url=https://ventolin.quest/]ventolin inhalers[/url] [url=https://lasix.charity/]furosemide 20 mg tablets[/url] [url=https://cephalexintabs.monster/]buy cephalexin 250 mg[/url] [url=https://buypropranolol.life/]cheap inderal[/url]...
https://allfreevn.com
exonse 1 ngày trước
ivermectin dosage for rabbits ivermectin for scabies ivermectin causes seizures...