前言：
此时看官们对“html制作表格”大概比较讲究，你们都需要剖析一些“html制作表格”的相关资讯。那么小编同时在网摘上搜集了一些有关“html制作表格””的相关资讯，希望小伙伴们能喜欢，同学们一起来了解一下吧！35行CSS样式码，让你的表格更加漂亮，先放最终效果：
最终样式
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> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html制作表格
