Html+CSS | 1段CSS让表格更漂亮 建议收藏

清爽简约蓝

最终样式

使用border-collapse: collapse;去掉表格线间的空白。
使用:nth-child(even)选择表格中的偶数行，进行修改背景色，如果选择奇数行，使用odd选择奇数。
使用:last-of-type选择最后一个元素进行画表格底线

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>

表格连接样式

最终样式

使用colspan进行行合并
使用rowspan进行列合并

#### html代码：
<table class="link-table">
  <tr>
    <td>我是</td>
    <td>一个</td>
    <td>美丽</td>
    <td>又</td>
    <td>漂亮</td>
    <td>小公主</td>
  </tr>
  <tr>
    <td colspan="2">我是</td>
    <td>一个</td>
    <td>美丽</td>
    <td>又</td>
    <td>漂亮</td>
  </tr>
    <tr>
    <td colspan="4">我是</td>
    <td rowspan="3">一个</td>
    <td>美丽</td>
  </tr>
  <tr>
    <td rowspan="2">我是</td>
    <td>一个</td>
    <td>美丽</td>
    <td>又</td>
    <td>漂亮</td>
  </tr>
  <tr>
    <td>一个</td>
    <td>美丽</td>
    <td>又</td>
    <td>漂亮</td>
  </tr>
</table>

CSS代码

<style>
        .link-table td:nth-child(1) {
            background: #40bf80
        }

        .link-table td:nth-child(2) {
            background: #33cc99
        }

        .link-table td:nth-child(3) {
            background: #26d9bb
        }

        .link-table td:nth-child(4) {
            background: #19e6e6
        }

        .link-table td:nth-child(5) {
            background: #0dccf2
        }

        .link-table td:nth-child(6) {
            background: #01aafe
        }
</style>