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

admin
2023年6月8日 10:13 本文热度 282
<!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协同办公管理系统。