登录  /  注册
博主信息
博文 21
粉丝 0
评论 0
访问量 22817
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
table的边框圆角设置--------2019.09.06
刂艹亻的博客
原创
3498人浏览过

table的边框圆角设置

在给table设置边框的时候,直接设置table-radius,是无效的。原因是css3的border不支持table-radius属性。若要想给rtable设置radius属性,可以使用border-collapse: separate;属性。用border-radius形成圆角,可以,但是在table表单中border-collapse:collapse和border-radius不相容,使用border-collapse:separate可以实现圆角,但单元格边框不会合并。分别给table外边框和th,td设置边框线。然受使用伪类选择器,分别给四个边角的th或td设置border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius属性.如图:


微信截图_20190908202518.png

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="static/css/style2.css">-->
    <title>html控制表格</title>
    <style>
        table {

            /*border-collapse: collapse;*/
            /*实现边框圆角*/
            border-collapse: separate;
            border-spacing: 0;
            width:800px;
            /*border:1px solid #444;*/
        }
        /*单独给th添加上边框*/
        table tr th {
            border-top:1px solid #d4d8da;
        }
        /*给所有的th和td添加右边框+下边框*/
        table tr th, table tbody tr td ,table tfoot tr td{
            border-right: 1px solid #d4d8da;
            border-bottom: 1px solid #d4d8da;
            text-align: center;
            padding: 10px;
        }
        /*给表头行的所有th加上左边框,
        第一行的第一个合并的单元格添加左边框,
        第5行的第一个合并过的单元格添加左边框*/
        table tr th:first-child, table tr:first-child td:first-child,
        table tr:nth-of-type(5) td:first-child {
        border-left: 1px solid #d4d8da;
        }

        /*给左边第一个th设置左上边框圆角*/
        table tr:first-child th:first-child {
            border-top-left-radius: 15px;
        }
        /*给左边/最后一个th设置右上边框圆角*/
        table tr:first-child th:last-child {
            border-top-right-radius: 15px;
        }
        /*给底部的tfoot的第一个td设置左下圆角*/
        table tfoot tr:last-child td:first-child {
            border-bottom-left-radius: 15px;
        }
        /*给tfoot的最后一个td设置右下圆角*/
        table tfoot tr:last-child td:last-child {
            border-bottom-right-radius: 15px;
        }

        /*table tfoot tr td {*/
        /*border-top: 1px solid #444;*/
        /*}*/
        /*table tr th,table tr td {*/
        /*border-right: 1px solid #444;*/
        /*border-bottom: 1px solid #444;*/
        /*text-align: center;*/
        /*padding: 10px;*/
        /*}*/
        /*table thead tr th {*/
        /*border-top: 1px solid #444;*/
        /*}*/
        /*table thead tr th:nth-of-type(1),table tbody tr:nth-of-type(1) td:nth-of-type(1),table tbody tr:nth-of-type(5) td:nth-of-type(1),table tfoot tr th:nth-of-type(1) td:nth-of-type(1){*/

        /*border-left: 1px solid #444;*/
        /*}*/
        /*th {*/
        /*border-bottom: none;*/
        /*}*/

        /*table tr:first-child th:first-child {*/
        /*border-top-left-radius: 15px;*/
        /*}*/

        /*table tr:first-child th:last-child {*/
        /*border-top-right-radius: 15px;*/
        /*}*/

        /*折叠边框线*/
        table caption {
            font-size: 1.3em;
            font-weight: 700;
            margin-bottom: 15px;
        }

        table thead >tr:first-of-type {
            /*background-color: lawngreen;*/
        }

        table tbody >tr:first-of-type >td:first-of-type {
            /*background-color: wheat;*/
        }
        table tbody >tr:nth-of-type(5) >td:first-of-type {
            /*background-color: lightblue;*/
        }
        table tfoot tr td {
            /*background-color: #ccc;*/
        }

        /*美化表格*/
        table {
            /*box-shadow: 2px 2px 2px #888888;*/
        }

        /*通过css 方式向页面添加元素,伪元素*/
        /*table:after {*/
        /*content: "hello !";*/
        /*}*/

        table:before {
            /*设置一下伪元素背景*/
            content: '';
            width:800px;
            height: 368px;
            position: absolute;
            left:7px;
            top: 115px;
            border-radius: 15px;

            /*设置伪元素背景*/
            /*background-image: url("../img/111.jpg");*/
            background-size: cover;
            opacity: 0.5;
        }


    </style>
</head>
<body>
<table>
    <!--标题-->
    <caption><h2>课程表</h2></caption>
    <!--表头-->
    <thead>
    <tr>
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="4" >上午</td>
        <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>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
    </tr>
    <tr>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
    </tr>
    <tr>
        <td rowspan="3">下午</td>
        <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>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
        <td>课程</td>
    </tr>

    </tbody>
    <tfoot><tr>
        <td>备注</td>
        <td colspan="5">周五要大扫除</td>
    </tr></tfoot>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:合格

老师批语:这个表格很有欧美范
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学