其他分享
首页 > 其他分享> > 表格样式

表格样式

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title><style type="text/css">
            /*
                设置表格宽度
            */
            table{
                width: 300px;
                margin: 0 auto;
                border: 1px solid black;
                /*
                    table和td边框之间默认有一个距离
                        通过border-spacing属性可以设置这个距离
                */
               border-spacing: 0px;
               /*
                    border-collapse可以用来设置表格的合并
                        如果设置了边框合并,则border-spacing自动失效
               */
              border-collapse: collapse;
             
            }
            /*表格设置边框*/
            td,th{
                border: 1px solid black;
            }
            /*隔行变色*/
            tr:nth-child(odd){
                background-color: #bfa;
            }
            /*鼠标移入tr改变颜色*/
            tr:hover{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <!-- 
            table是一个块元素
         -->
        <table>
            <tr>
                <!-- 
                    可以使用th标签来表示表头中的内容
                        用法和td一样,不同的是它会有一些默认效果
                 -->
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
            <tr>
                <td>1</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>2</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>3</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            
        </table>
    </body>
</html>

表格table和td边框之间默认有一个距离

  通过border-spacing属性可以设置这个距离

  border-spacing可以用来设置这个距离

  border-collapse可以用来设置表格合并

    如果设置了边框合并,则boreder-spacing自动失效

隔行变色  tr:nth-child(odd){   

 

       background-color:  #bfa;

 

}        ------odd是奇数行   even是偶数行

鼠标移tr改变颜色

  tr:hover{

    background-color: yellow;

}

标签:表格,样式,spacing,tr,边框,设置,border
来源: https://www.cnblogs.com/kfj010810/p/14980928.html