CSS3之table属性

最新推荐文章于 2024-05-22 00:30:00 发布

Programmer.杨

最新推荐文章于 2024-05-22 00:30:00 发布

阅读量702

点赞数 1

分类专栏：前端技术-CSS 文章标签： border-collapse border-spacing empt

本文链接：https://blog.csdn.net/ywb88888888/article/details/102709821

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

border-collapse:

作用：
          设置表格的边框是否被合并为一个单一的边框
说明：
           border-collapse属性，如果没有指定 !DOCTYPE，可能产生意想不到的效果
常用值：
          (separate)： 默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
          (collapse)： 如果可能，边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性

border-spacing:

作用：
          设置相邻单元格的边框间的距离
说明：
          仅用于 “边框分离” 模式 （border-collapse属性不为collapse时）
常用值：
          (NUMBER px或cm)： 规定相邻单元的边框之间的距离，不允许使用负值。如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距

caption-side:

作用：
          设置表格标题的位置
说明：
          IE8 只有指定 !DOCTYPE，才支持caption-side属性
常用值：
          (top)： 默认值，把表格标题定位在表格之上
          (bottom)： 把表格标题定位在表格之下

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之table属性</title>
    
    <style type="text/css">
        #showtable2 {
            width: 600px;
            height: 400px;
            text-align: center;
            caption-side: bottom;
            border-spacing: 10px 5px;
        }
    </style>
</head>
<body>
    <table id="showtable2" border="1px" align="center">
        <tr>
            <td>林雷</td>
            <td>秦羽</td>
            <td>纪宁</td>
            <td>罗峰</td>
            <td>张星峰</td>
        </tr>
        <tr>
            <td>迪丽娅</td>
            <td>姜丽</td>
            <td>余薇</td>
            <td>徐欣</td>
            <td>...</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>bb</td>
            <td>cc</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

empty-cells:

作用：
          设置是否显示表格中的空单元格
说明：
          仅用于 “分离边框” 模式 （border-collapse属性不为collapse时）
常用值：
          (show)： 默认值，在空单元格周围绘制边框
          (hide)： 不在空单元格周围绘制边框

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之table属性</title>
    
    <style type="text/css">
        #showtable {
            width: 600px;
            height: 400px;
            text-align: center;
            caption-side: top;
            empty-cells: hide;
        }
        #showtd {
            background-color: pink;
            position: relative;
            bottom: 50px;
            right: 50px;
            width: 120px;
            height: 120px;
            border: none;
            border-radius: 60px;
            box-shadow: 0 0 20px 10px pink;
        }
        #showdiv {
            background-color: red;
            margin: auto;
            text-align: center;
            line-height: 75px;
            box-shadow: 0 0 15px 5px red;
            border-radius: 37px;
            width: 75px;
            height: 75px;
        }
    </style>
</head>
<body>
    <table id="showtable" border="1px" align="center">
        <caption>人物表</caption>
        <tr>
            <td>林雷</td>
            <td>秦羽</td>
            <td>纪宁</td>
            <td>罗峰</td>
            <td>张星峰</td>
        </tr>
        <tr>
            <td>迪丽娅</td>
            <td>姜丽</td>
            <td>余薇</td>
            <td>徐欣</td>
            <td>...</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>bb</td>
            <td>cc</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td></td>
            <td id="showtd">
                <div id="showdiv">
                    <Strong>Demo</Strong>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

Programmer.杨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之table属性

border-collapse:作用：          设置表格的边框是否被合并为一个单一的边框说明：           border-collapse属性，如果没有指定 !DOCTYPE...
复制链接

扫一扫

专栏目录