CSS：设置表格样式

_卷心菜_

于 2021-12-11 21:52:55 发布

阅读量2.9k

点赞数 3

分类专栏： java Web搭建文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/Thumb_/article/details/121879888

版权

java Web搭建专栏收录该内容

41 篇文章

订阅专栏

设置前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
</head>
<body>
    <table>
        <tr>
            <th>名称</th>
            <th>职位</th>
            <th>收入</th>
        </tr>
        <tr class="info">
            <td>张三</td>
            <td>老板</td>
            <td>100000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>秘书</td>
            <td>10000</td>
        </tr>
        <tr class="info">
            <td>王五</td>
            <td>主管</td>
            <td>20000</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
进行设置：

<style>
    table, th, td {
        border: 1px lightgray solid;
        border-collapse: collapse;
    }
    table {
        width: 80%;
        margin: 0px auto;
    }
    th, td {
        padding: 10px;
    }
    th {
        background-color: lightseagreen;
        color: white;
    }
    .info {
        background-color: lightskyblue;
    }
</style>

在这里插入图片描述