LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

HTML纯CSS实现table表格单元格斜线表头

admin
2023年6月8日 10:13 本文热度 443

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>斜线表头</title>

    <style>

        /* 基本表格元素 */

        table {

            border-collapse: collapse;

        }

 

        th,

        td {

            border: 1px solid #e6e6e6;

            padding: 5px;

            text-align: center;

            /* font-weight: 400; */

        }

 

        /* tr td {

            width: 48px;

        }

 

        tr td:first-child {

            width: 48px;

        } */

        .index_td {

            width: 48px;

        }

 

        /* th单元格 */

        .slash-wrap {

            position: relative;

            box-sizing: border-box;

            width: 150px;

            height: 80px;

        }

 

        /* 斜线 */

        .slash1 {

            position: absolute;

            display: block;

            top: 0;

            left: 0;

            /* 斜边边长 */

            /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */

            /* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */

            width: 100px;

            height: 1px;

            background-color: #e6e6e6;

            /* 旋转角度计算公式 */

            /*  Math.atan(height / width) * 180 / Math.PI  */

            /*  Math.atan(80 / 150) * 180 / Math.PI  = 28.072486935852954 */

            transform: rotate(53.13010235415598deg);

            transform-origin: top left;

        }

 

        /* 斜线 */

        .slash2 {

            position: absolute;

            display: block;

            top: 0;

            left: 0;

            /* 斜边边长 */

            /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */

            /* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */

            width: 170px;

            height: 1px;

            background-color: #e6e6e6;

            /* 旋转角度计算公式 */

            /*  Math.atan(height / width) * 180 / Math.PI  */

            /*  Math.atan(80 / 150) * 180 / Math.PI  = 28.072486935852954 */

            transform: rotate(28.072486935852954deg);

            transform-origin: top left;

        }

 

        /* 左下角文字 */

        .left {

            position: absolute;

            /* 左下角 left:0; bottom: 0; */

            left: 3px;

            bottom: 4px;

        }

 

        /* 右上角文字 */

        .mid {

            position: absolute;

            /* 右上角 right:0; top: 0; */

            left: 42px;

            bottom: 5px;

        }

 

        /* 右上角文字 */

        .right {

            position: absolute;

            /* 右上角 right:0; top: 0; */

            right: 8px;

            top: 15px;

            letter-spacing: 10px;

        }

    </style>

</head>

<body>

    <div>

        <table>

            <tr>

                <th class="slash-wrap" rowspan="2" colspan="2">

                    <span class="left"><i style="display: block;width: 18px;"></i><i

                            style="width: 18px;display: block;padding-left: 14px;"></i></span>

                    <span class="slash1"></span>

                    <span class="mid"><i style="display: block;width: 18px;"></i><i

                            style="width: 18px;display: block;padding-left: 26px;"></i></span>

                    <span class="slash2"></span>

                    <span class="right">尺码</span>

                </th>

                <th colspan="2">25#</th>

                <th colspan="2">26#</th>

                <th colspan="2">27#</th>

                <th colspan="2">28#</th>

                <th colspan="2">29#</th>

                <th colspan="2">30#</th>

                <th colspan="2">31#</th>

                <th colspan="2">32#</th>

                <th rowspan="2">余米</th>

            </tr>

            <tr>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

                <td>扎号</td>

                <td>件数</td>

            </tr>

            <tr>

                <td class="index_td">1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

        </table>

    </div>

</body>

</html>


该文章在 2023/6/8 10:13:57 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved