78表格的样式

最新推荐文章于 2022-10-20 16:36:28 发布

广东码农

最新推荐文章于 2022-10-20 16:36:28 发布

阅读量47

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117995229

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

现在不要使用表格进行布局！除非真的要弄一个表格！

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的样式</title>
    <style>
        table {
            border: 1px solid black;/* 这里仅仅是为整个表格外围设置边框 */
            width: 50%;
            margin: 50px auto 0px;/* 相当于一个块元素 */
            /* border-spacing: 10px; */ /* 设置边框之间的距离 */
            border-collapse: collapse; /* 设置边框的合并 */
        }
        td {
            border: 1px solid black;/* 设置每个单元格的边框 */
            /*
                默认情况下元素在td中是垂直居中的
                可以通过 vertical-align来设置垂直方向的位置
             */
            vertical-align: bottom;
            text-align: right;
        }

        /* 
            如果表格中没有使用tbody而是直接使用tr
                那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
                tr不是table的子元素，无法通过子元素选择器选中tr
         */
        tr:nth-child(2n) {/* 2n+1，选中奇数行；2n，选中偶数行;也可以：odd，奇数；也可以：even，偶数 */
            background-color: #bfa;
        }

        /* 利用vertical-align来使子元素垂直居中 */
        .outer {
            width: 500px;
            height: 500px;
            background-color: orange;
            display: table-cell;/* 将该元素变成一个table的单元格 */
            vertical-align: middle;/* 单元格内的东西垂直居中 */
        }
        .inner {
            width: 250px;
            height: 250px;
            background-color: #bfa;
            margin: 0 auto  ;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><h1>学号</h1></td><!-- vertical-align对这个h1好像无效 -->
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>1</td>
            <td>钟钟喵</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>窜宝</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>3</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>42</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>26</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>26</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>26</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>26</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>26</td>
        </tr>
    </table>
    
    <!-- 利用vertical-align来使子元素垂直居中 -->
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>