HTML、CSS表格的斜表头样式设置title 画对角线
我里面有用到layui框架的影响，实际根据你自己的框架来小调下就可以
效果如下
上代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对角线单元格示例</title><style>/* 模拟对角线 */.oline {border-top: 40px #fff solid;/*上边框宽度等于表格第一行行高*/width: 0px;/*让容器宽度为0*/height: 0px;/*让容器高度为0*/border-left: 80px #fff solid;/*左边框宽度等于表格第一行第一格宽度*/position: relative;/*让里面的两个子容器绝对定位*/}.oline::before {position: absolute;top: -49px;left: -95px;width: 110px;height: 58px;background: #E3ECFF url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNDRUQzREMiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==) no-repeat 100% center;content: '';}.span1 {font-style: normal;display: block;position: absolute;top: -42px;left: -43px;width: 56px;}.span2 {font-style: normal;display: block;position: absolute;top: -15px;left: -93px;width: 59px;}</style>
</head>
<body>
<table class="layui-table" style="width: auto;" border="1"> <thead> <tr><th style="width: 110px;"><div class="oline"><span class="span1">费用类别</span> <span class="span2">科室名称</span></div></th> <th style="width: 110px;">超声费</th> <th style="width: 110px;">处置</th> <th style="width: 110px;">床位费</th> <th style="width: 110px;">放射费</th> <th style="width: 110px;">护理费</th> <th style="width: 110px;">化验费</th> <th style="width: 110px;">心电图</th> <th style="width: 110px;">中医理疗费</th> <th style="width: 110px;">注射费</th> </tr></thead> <tbody> <tr> <td style="width: 110px;">**组</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;">141.000</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> </tr> <tr> <td style="width: 110px;">**组</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;">25.500</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> </tr> <tr> <td style="width: 110px;">***组</td> <td style="width: 110px;">566.000</td> <td style="width: 110px;">13.500</td> <td style="width: 110px;"></td> <td style="width: 110px;">240.000</td> <td style="width: 110px;"></td> <td style="width: 110px;">2605.900</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> </tr> <tr> <td style="width: 110px;">**组</td> <td style="width: 110px;">410.000</td> <td style="width: 110px;">15.900</td> <td style="width: 110px;"></td> <td style="width: 110px;">180.000</td> <td style="width: 110px;"></td> <td style="width: 110px;">637.800</td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> <td style="width: 110px;"></td> </tr> </tbody></table></body>
</html>相关文章：
HTML、CSS表格的斜表头样式设置title 画对角线
我里面有用到layui框架的影响，实际根据你自己的框架来小调下就可以 效果如下 上代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...
docker 安装mysql 5.7 详细保姆级教程
1. 安装mysql(5.7) docker pull mysql:5.7 若是拉取不了，可以配置下 docker 源 2. 查看是否安装成功 docker images 下图就是成功了 3.创建mysql专用目录、数据挂载目录、配置文件目录 ，演示目录在于/home/下 //命令逐条执行cd /home/ mkdir mysql …...
Kioptrix level3
声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...
UE5 Lyra项目源码分析-关卡配置加载
最近刚学完一套教程，准备研究研究官方的源码，看看自己能不能看懂。 当前分析只在本人能力之下能够分析的内容，如果有一些问题，还请大家指出。 开始 如果你打开一个别人的项目，你会从哪里看起，如果是我&am…...
Cursor重置机器码-解决Too many free trials.
参考文章：如何绕过Cursor的机器绑定限制 前言 在前面这篇文章无限使用Cursor指南中，我提到使用 无限邮箱 或者 删除账号并重新注册 的方法，来无限使用Cursor免费版。但是当在本机登录过3个账号后，就会报这个“Too many free tria…...
transformer学习笔记-自注意力机制（2）
经过上一篇transformer学习笔记-自注意力机制（1）原理学习，这一篇对其中的几个关键知识点代码演示： 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理： import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…...
呼叫中心呼入大模型如何对接传统呼叫中心系统？
呼叫中心呼入大模型如何对接传统呼叫中心系统？ 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 呼叫中心呼入大模型与传统呼叫中心系统的对接是一个复杂而细致的过程，涉及技术实现、流程…...
[Unity] Text文本首行缩进两个字符
Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如： 效果： 代码： TMPtext1.text "\u3000\u3000" "选择动作类型：";...
最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件
背景 Adobe PDF阅读器控件是一个ActiveX控件，用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性，可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…...
springboot 对接 ollama
spring ai 对接 ollama 引入依赖 <dependency><groupId>io.springboot.ai</groupId><artifactId>spring-ai-ollama-spring-boot-starter</artifactId><version>1.0.0</version> </dependency>这里因为使用的是快照版本所以需…...
【数据库】选择题+填空+简答
1.关于冗余数据的叙述中，不正确的是（） A.冗余的存在容易破坏数据库的完整新 B.冗余的存在给数据库的维护增加困难 C.不应该在数据库中存储任何冗余数据 D.冗余数据是指由基本数据导出的数据 C 2.最终用户使用的数据视图称为（&…...
从0开始写android 之xwindow
模拟实现android的窗口系统本质上还是在ubuntu 上实现自己的窗口系统， xwindow是一套成熟的解决方案。在ubuntu上使用xwindow的好处之一 是ubuntu自带xwindow的库， 直接引用头文件和库文件。下面来了解下 xwindow的基本函数接口。 参考 https://tronche…...
The Past, Present and Future of Apache Flink
摘要：本文整理自阿里云开源大数据负责人王峰（莫问）在 Flink Forward Asia 2024上海站主论坛开场的分享，今年正值Flink开源项目诞生的第10周年，借此时机，王峰回顾了Flink在过去10年的发展历程以及 Flink社区…...
多模块应用、发布使用第三方库（持续更新中）
目录: 1、多模块概述（HAP、HSP、HAR） HAR与HSP两种共享包的主要区别体现在： 2、三类模块： 3、创建项目：项目名：meituan （1）创建Ability类型的Module，编译后为HAP文件…...
An error happened while trying to locate the file on the Hub and we cannot f
An error happened while trying to locate the file on the Hub and we cannot find the requested files in the local cache. Please check your connection and try again or make sure your Internet connection is on. 关于上述comfy ui使用control net预处理器的报错问…...
UE5安装Fab插件
今天才知道原来Fab也有类似Quixel Bridge的插件，于是立马就安装上了，这里分享一下安装方法 在Epic客户端 - 库 - Fab Library 搜索 Fab 即可安装Fab插件 然后重启引擎，在插件面板勾选即可 然后在窗口这就有了 引擎左下角也会多出一个Fab图标…...
Linux C语言操作sqlite3数据库
一、环境配置 1、下载源码：sqlite-autoconf-3470200.tar.gz 2、解压，cd到源码主目录 3、配置参数 ./configure --prefix/usr/local/ 如果是交叉编译环境 ./configure CC/opt/rk3288/gcc-linaro/bin/arm-linux-gnueabihf-gcc --hostarm-linux --pre…...
【人工智能】因果推断与数据分析：用Python探索数据间的因果关系
解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 因果推断是数据科学领域的一个重要方向，旨在发现变量间的因果关系，而不仅仅是相关性。本篇文章将从因果推断的理论基础出发，介绍因果关系的定义与建模方法，涵盖因果图（Causal Graph）、d-分离、反事实估计等…...
freeswitch（30秒自动挂断）
亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径（根据自己的路径进入） /usr/local/freeswitch/etc/freeswitch场景说明： A和B接通通话时候，时间开始计算到达30秒后自动挂断使用方法 进入/usr/local/freeswitch/etc...
)
大模型呼入机器人有哪些功能特点？(转)
大模型呼入机器人有哪些功能特点？(转) 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 大模型呼入机器人，作为现代通信技术与人工智能深度融合的产物，正逐渐成为企业提升服务…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
uniapp 字符包含的相关方法
在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...