首页 前端知识 【css实现table斜线表头】

【css实现table斜线表头】

2024-08-08 22:08:16 前端知识 前端哥 464 88 我要收藏

在这里插入图片描述

<!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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15027.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!