您现在的位置是:首页 > 正文

【css实现table斜线表头】

2024-02-29 11:17:03阅读 0

在这里插入图片描述

<!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>

网站文章

  • Laravel + Laravel-admin 搭建网站后台

    Laravel + Laravel-admin 搭建网站后台

    本地环境: laravel版本: laravel-admin版本: laravel-admin优秀扩展包!! 一、安装配置Laravel6.11.0 1.安装 composer create-project --prefer-dist laravel/laravel blog 2.改时区 &#39;timezone&#39; =&gt; &#39;PRC&#39; 3.改语言 ...

    2024-02-29 11:16:55
  • WebSocketConfigurationSupport$NoOpScheduler.schedule

    项目中使用了WebSocket进行消息的推送,同时又使用了定时器Scheduled进行定时执行操作,这两者同时使用抛出异常。java.lang.IllegalStateException: Unexp...

    2024-02-29 11:16:48
  • android中的TextView组件,Android控件之TextView全解析

    android中的TextView组件,Android控件之TextView全解析

    前言大家好!在前几篇文章里,我们详细介绍了Android中的常用布局,使大家对Android中的页面布局有了一定认识,而对于布局中使用的一些UI控件如Button、TextView等,有的读者可能还存...

    2024-02-29 11:16:19
  • .NET 面试题 - 初级&amp;中级

    初级.NET开发人员 - 任何使用.NET的人都应知道的 1. 描述线程与进程的区别? 进程是系统所有资源分配时候的一个基本单位,拥有一个完整的虚拟空间地址,并不依赖线程而独立存在。进程可以定义程序的...

    2024-02-29 11:16:10
  • Mysql基础 — DDL、DML、DQL、DCL、函数、约束

    Mysql基础 — DDL、DML、DQL、DCL、函数、约束

    编号(纯数字)员工工号 (字符串类型,长度不超过10位)员工姓名(字符串类型,长度不超过10位)性别(男/女,存储一个汉字)年龄(正常人年龄,不可能存储负数)身份证号(二代身份证号均为18位,身份证中有X这样的字符)入职时间(取值年月日即可)

    2024-02-29 11:16:04
  • el-table 鼠标悬浮时背景色改变

    el-table 鼠标悬浮时背景色改变

    el-table 鼠标悬浮时改变背景色

    2024-02-29 11:15:30
  • 《张居正》—— 读后总结

    《张居正》—— 读后总结

    2019独角兽企业重金招聘Python工程师标准>>> ...

    2024-02-29 11:15:23
  • 计算机毕业设计选题推荐-学生宿舍管理微信小程序/安卓APP

    计算机毕业设计选题推荐-学生宿舍管理微信小程序/安卓APP

    随着信息技术的迅速发展,学生宿舍管理逐渐转向数字化和信息化。传统的管理方式存在许多弊端,例如:信息不透明、管理效率低下、学生满意度低等。因此,开发一款新型的学生宿舍管理微信小程序/安卓APP,具有重要...

    2024-02-29 11:15:17
  • sqoop导入数据中含有\t、\n等的解决方法

    sqoop从mysql导入到hive的命令如下:sqoop import --connect jdbc:mysql://serveraddress:3306/test  --username root...

    2024-02-29 11:14:41
  • iOS之PDF相关实现

    iOS之PDF相关实现

    PDF的阅读功能几种方法实现:https://www.jianshu.com/p/93ec03564b4c https://www.jianshu.com/p/ba08f8832528 集成第三方SDK 福昕Foxit PDF SD 国内付费SDK,可对PDF做标注等更多操作功能; PlugPDF 国外付费SDK,可对PDF做标注等更多操作功能; PSPDFKit 国外付费SDK,可对P...

    2024-02-29 11:14:34