表格样式

使用 CSS 改善表格的用户体验。

行斑马条纹

在每隔一行添加背景颜色。

在下例中，even代表偶数行，odd代表奇数行。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{background: #eee;}
    /** 偶数行背景颜色设置为淡蓝色 */
    tr:nth-child(even) {
        background: #dcf4ff;
    }
    /** 奇数行背景颜色设置为白色 */
    tr:nth-child(odd) {
        background: #edf7ff;
    }
</style>
<table>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank

列斑马条纹

在每隔一列添加背景颜色。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{background: #eee;}
    td:nth-child(even), th:nth-child(even) {
        background: #dcf4ff;
    }
</style>
<table>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank

HTML 参考

名称	描述

CSS 参考

名称	描述