CSS(九) 设置表格样式

最新推荐文章于 2024-11-01 17:09:44 发布

原创最新推荐文章于 2024-11-01 17:09:44 发布 · 618 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS来设置HTML表格的各种样式，包括边框、宽度、隔行换色及列样式等，并实现鼠标悬停时行变色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置表格的边框

Border：设置表格边框；
Border-collapse：设置边框分离或者合并，默认是separate(分离)的，值collapse 为合并；
Border-spacing ：设置单元格的间距；
Padding：设置单元格内容和边框之间的距离；

设置表格的宽度

Table-layout
默认auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式表格宽度固定；

.t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }

设置表格隔行换色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格隔行换色</title>
<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }

    .t tr{
        background-color: #CCC;
    }

    .t td{
        border: 1px gray solid;
        padding: 5px;
    }

    .t th{
        border: 1px gray solid;
        padding: 5px;
    }

    tbody tr.even{
        background-color: #AAA;
    }
</style>
</head>
<body>
    <table class="t">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>001</td>
                <td>a</td>
                <td>男</td>
                <td>2012-12-12</td>
            </tr>
            <tr class="even">
                <th>2</th>
                <td>002</td>
                <td>b</td>
                <td>女</td>
                <td>2011-11-11</td>
            </tr>
            <tr>
                <th>3</th>
                <td>003</td>
                <td>c</td>
                <td>女</td>
                <td>2010-10-10</td>
            </tr>
            <tr class="even">
                <th>4</th>
                <td>004</td>
                <td>d</td>
                <td>女</td>
                <td>2009-10-10</td>
            </tr>
            <tr>
                <th>5</th>
                <td>005</td>
                <td>e</td>
                <td>男</td>
                <td>2008-01-01</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <th colspan="4">5条数据</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

设置表格列样式

设置列样式

th+td{
        text-align: center;
    }

    th+td+td+td{
        text-align: center;
        background-color: red;
    }

设置鼠标经过时行变色效果

经过时变色

tbody tr:HOVER {
        background-color: aqua;
    }