首页 » CSS » CSS属性分类扫描-表格属性

CSS属性分类扫描-表格属性

原文 http://blog.csdn.net/qq_34902437/article/details/79202289

2018-01-31 02:00:21阅读(598)

目的
本博文旨在总结CSS属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。
本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。
综合参考 MDN–CSS参考手册 W3Cschool–CSS参考手册 属性一览 caption-side 属性 定义 属性值 caption-side 规定标题的与表格之间的位置关系 top:在表格之上;bottom:在表格之下

示例及代码

当设置为 top 的时候

CSS属性分类扫描-表格属性

当设置为 bottom 的时候

CSS属性分类扫描-表格属性

当设置为 bottom 的时候的代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        caption{
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table border="1px" width="300px">
        <caption>caption-side是用来设置标题的位置的</caption>
        <thead>
            <th>表头1</th>  
            <td>无关紧要</td>
        </thead>
        <tbody>
            <th>表头2</th>
            <td>无关紧要</td>
        </tbody>
        <tbody>
            <th>表头3</th>  
            <td>无关紧要</td>
        </tbody>        
    </table>
</body>
</html>
caption-side 属性本身是没有多大难度的,但是与之相关的 table 里的 th、tr、td、thead、tbody、tfoot这些标签却是理解上的难点,尤其是国内外的一些教程本身都存在问题,但是这里不打算介绍关于 HTML 的标签的问题,附上一些不错的链接便于深入学习。
html中 table的结构 彻底搞清 caption th thead等 html tables: thead vs th empty-cells 属性 定义 属性值 empty-cells 在 table 中设置 empty-cells 如果表框中没有内容将会被隐藏,而不现实效果 hide:隐藏;show:显示

示例

设置了 empty-cells 为 hide

CSS属性分类扫描-表格属性

设置为 show (默认值)

CSS属性分类扫描-表格属性

接下来介绍两个在 CSS 中非常冷门的属性,虽然冷门,但是万一遇到问题,也好有个解决的思路。
属性 定义 属性值 page-break-after 在表格元素后进行分页 auto:如果必要在表格后进行分页;always:总在表格后进行分页;avoid:避免在表格后进行分页;left:在表格后足够的分页符,到一张空白的左页;right:在表格后足够的分页符,到一张空白的右页。( left 和 right 这两个属性值我也不太清楚具体的含义) page-break-before 在表格元素前进行分页 属性值和上面一样,不过把“后”换为“前” table-layout
该属性用于设置 table 表格的宽度适应算法,简单点就是表格的宽度是根据内容进行自适应还是根据代码的值进行适应。就好像 ecxel 里面的固定列宽的操作一样。
属性 属性值 table-layout auto:自适应;fixed:固定列宽

示例及代码

CSS属性分类扫描-表格属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{
            margin-top: 20px;
        }
        .table1{
            table-layout: auto;
        }
        .table2{
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <table border="1px" width="300px" class="table1">
        <caption>设置为 auto</caption>
        <thead>
            <th width="10%">111111111111111111111111111111</th>  
            <td width="90%">0000000000</td>
        </thead>      
    </table>
    <table border="1px" width="300px" class="table2">
        <caption>设置为 fixed</caption>
        <thead>
            <th width="10%">111111111111111111111111111111</th>  
            <td width="90%">0000000000</td>
        </thead>      
    </table>
</body>
</html>
border-collapse 属性 定义 属性值 border-collapse 用于设定表格的模式是边框分离还是不分离 collapse:合并;sparate:分离

CSS属性分类扫描-表格属性

CSS属性分类扫描-表格属性

border-spacing 定义 属性值 在 border-collapse 设置为分离的模式下,用于决定表格边框间的宽度 length:水平和垂直距离;length length:水平距离 垂直距离

示例

CSS属性分类扫描-表格属性

至此,表格的属性就讲完了。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹