首页 > Web开发 > 详细

CSS 表格样式

时间:2020-09-27 16:09:41      阅读:25      评论:0      收藏:0      [点我收藏+]

本节我们来学习表格样式,通过 CSS 中的属性可以设置表格的外观,例如表格边框样式、颜色、间距等。

设置表格边框

之前我们讲 HTML 的使用讲过,在 HTML 中如果要设置表格的边框,可以使用 border 属性。而 CSS 中同样有一个 border 属性可以用来设置边框,上一节我们也有讲到这个属性,所以这里就不详细讲啦。

示例:

将下面这个表格的边框设置成1像素、实线、蓝色:

<!DOCTYPE>
<html>
    <head>
    	<meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <table>
            <tr>    
                <td>单元格一</td>
                <td>单元格二</td>
                <td>单元格三</td>
            </tr>
            <tr>    
                <td>单元格四</td>
                <td>单元格五</td>
                <td>单元格六</td>
            </tr>
            <tr>    
                <td>单元格七</td>
                <td>单元格八</td>
                <td>单元格九</td>
            </tr>
        </table>
    </body>
</html>

CSS 样式:

table, td{
	border:1px solid blue;
}

在浏览器中的演示效果: 技术分享图片

border-collapse

border-collapse 属性用于设置表格的边框是否被合并为一个单一的边框。

属性值如下所示:

属性值描述
separate 默认值,边框会被分开,不会忽略 border-spacing 和 empty-cells 属性
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
inherit 规定应该从父元素继承 border-collapse 属性的值
示例:

为表格设置合并边框:

table{
	border:1px solid blue;
	border-collapse: collapse;
}
td{
	border:1px solid blue;
}

在浏览器中的演示效果: 技术分享图片

border-spacing

border-spacing 属性设置相邻单元格的边框间的距离,仅用于”边框分离“分离模式,也就是 border-collapse 属性的值为 separate

示例:

例如设置表格单元格的边框间距为 10px:

table{
	border:1px solid blue;
	border-collapse: separate;
	border-spacing: 10px;
}
td{
	border:1px solid blue;
}

在浏览器中的演示效果: 技术分享图片

empty-cells

empty-cells 设置是否显示表格中的空单元格,同样仅用于”分离边框“模式。

属性值为:

属性值描述
hide 不在空单元格周围绘制边框
show 默认,在空单元格周围绘制边框
inherit 规定应该从父元素继承 empty-cells 属性的值
示例:

隐藏表格的空单元格的边框:

table{
	border:1px solid blue;
	border-collapse: separate;
	border-spacing: 10px;
	empty-cells: hide;
}
td{
	border:1px solid blue;
}

在浏览器中的演示效果: 

来源:站长资讯

CSS 表格样式

原文:https://www.cnblogs.com/0591jb/p/13739712.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!