CSS表格属性

原创于 2025-02-23 15:04:17 发布

· 209 阅读

0 ·

版权

文章标签：

#css #前端 #json #javascript #chrome #safari #css3

HTML+CSS 专栏收录该内容

20 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS表格相关属性</title>
    <style>
        table {
            border: 3px red solid;
            width: 500px;
            /* 设置列宽度 */
            table-layout: fixed;

            /* 设置单元格间距 */
            border-spacing: 0px;
            /* 合并单元格边框 */
            border-collapse: collapse;
            


        }

        td,
        th {
            border: 3px green solid;
        }
    </style>
</head>

<body>
    <table>
        <caption> 人员信息 </caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
                <td>女</td>
                <td>党员</td>
            </tr>
        </tbody>
    </table>


</body>

</html>