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>,
