CSS表格样式

1.合并单元格

td单元格元素的rowspan属性为n表示会横向的合并n个单元格,colspan属性为n表示会纵向的合并n个单元格,但是要注意把需要合并的单元格删除。


<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta标签还可以设置网页页面的元数据-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
    </script>
</head>
<body style="height: 5000px;">
    <table border="1" width="40%" align="center">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
        </tr>
        <tr>
            <td>q</td>
            <td>w</td>
            <td>e</td>
        </tr>
        <tr>
            <td>x</td>
            <td>y</td>
            <td colspan="2">z</td>
        </tr>
    </table>
</body>
</html>

2.设置单线的表格

像下面这样给每一个表格元素设置边框,然后把border-spacing属性设置为0,这样得到的虽然是单线的表格,但是线很粗

border-spacing属性可以设置table和td边框之间的距离

        table{
            width: 300px;
            margin: 0 auto;
            /*table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离*/
            border-spacing: 0px;
            /*border-collapse可以用来设置表格边框的合并,如果设置了边框合并,则border-spacing自动失效*/
        }
        td{
            border: 1px solid black;
        }

也可以把 border-collapse的值设置为collapse,border-collapse可以用来设置表格边框的合并,如果设置了边框合并,则border-spacing自动失效

        table{
            width: 300px;
            margin: 0 auto;
            /*table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离*/
            /*border-spacing: 0px;*/
            /*border-collapse可以用来设置表格边框的合并,如果设置了边框合并,则border-spacing自动失效*/
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }

3.长表格

有时表格比较长的时候,我们需要将表格分成三个部分,表头,表格主体,表格底部

thead标签是表头标签,tbody标签是表格主体,tfoot标签是表格底部

这三个标签的作用是区分表格不同的部分,而且如果表格中没有写tbody,浏览器会自动在表格中添加tbody,并且将所有tr元素放到tbody中,所以注意tr不是table的子元素,而是tbody的子元素,通过table>tr无法选中行元素,需要通过tbody>tr来选中行元素

4.使用table解决父子元素外边距重合问题

子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素,导致父元素位置的移动,我们可以在父子元素重合的边之间添加一个空的<table>标签来隔离父子元素的外边距,同样的我们可以通过CSS的样式来操作

.solution:before{
content:"";
/*display:table可以将一个元素设置为表格显示*/
display:table;
}

根据前面解决高度塌陷问题的样式,我们可以把两个解决样式合并成为一个clearfix样式

.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;
}

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页