html表格样式模板-html表格模板代码

35行CSS样式码,让html表格样式模板html表格样式模板的表格更加漂亮,先放最终效果html表格样式模板

html表格样式模板

最终样式

HTML表格代码如下:<table class="style-table"> <thead> <tr> <th>序号</th> <th>物品名称</th> <th>金额</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>洗衣粉</td> <td>15.00</td> <td>自己用</td> </tr> <tr class="active-row"> <td>2</td> <td>洁尔阴</td> <td>25.00</td> <td>老婆用</td> </tr> <tr > <td>3</td> <td>搓衣板</td> <td>5.00</td> <td>自己用</td> </tr> </tbody> </table>CSS代码如下: <style> .style-table { border-collapse: collapse; margin: 50px auto; font-size: 0.9em; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .style-table thead tr { background-color: #0398dd; color: #ffffff; text-align: left; } .style-table th, .style-table td { padding: 12px 15px; } .style-table tbody tr { border-bottom: 1px solid #dddddd; } .style-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .style-table tbody tr:last-of-type { border-bottom: 2px solid #0398dd; } .style-table tbody tr.active-row { font-weight: bold; color: #0398dd; } </style>
发布于 2024-05-08 08:05:35
收藏
分享
海报
0 条评论
77
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~