当前位置: 首页 > news >正文

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框架的影响&#xff0c;实际根据你自己的框架来小调下就可以 效果如下 上代码 <!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 若是拉取不了&#xff0c;可以配置下 docker 源 2. 查看是否安装成功 docker images 下图就是成功了 3.创建mysql专用目录、数据挂载目录、配置文件目录 &#xff0c;演示目录在于/home/下 //命令逐条执行cd /home/ mkdir mysql …...

Kioptrix level3

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

UE5 Lyra项目源码分析-关卡配置加载

最近刚学完一套教程&#xff0c;准备研究研究官方的源码&#xff0c;看看自己能不能看懂。 当前分析只在本人能力之下能够分析的内容&#xff0c;如果有一些问题&#xff0c;还请大家指出。 开始 如果你打开一个别人的项目&#xff0c;你会从哪里看起&#xff0c;如果是我&am…...

Cursor重置机器码-解决Too many free trials.

参考文章&#xff1a;如何绕过Cursor的机器绑定限制 前言 在前面这篇文章无限使用Cursor指南中&#xff0c;我提到使用 无限邮箱 或者 删除账号并重新注册 的方法&#xff0c;来无限使用Cursor免费版。但是当在本机登录过3个账号后&#xff0c;就会报这个“Too many free tria…...

transformer学习笔记-自注意力机制(2)

经过上一篇transformer学习笔记-自注意力机制&#xff08;1&#xff09;原理学习&#xff0c;这一篇对其中的几个关键知识点代码演示&#xff1a; 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理&#xff1a; import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…...

呼叫中心呼入大模型如何对接传统呼叫中心系统?

呼叫中心呼入大模型如何对接传统呼叫中心系统&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 呼叫中心呼入大模型与传统呼叫中心系统的对接是一个复杂而细致的过程&#xff0c;涉及技术实现、流程…...

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如&#xff1a; 效果&#xff1a; 代码&#xff1a; TMPtext1.text "\u3000\u3000" "选择动作类型&#xff1a;";...

最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件

背景 Adobe PDF阅读器控件是一个ActiveX控件&#xff0c;用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性&#xff0c;可以实现对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.关于冗余数据的叙述中&#xff0c;不正确的是&#xff08;&#xff09; A.冗余的存在容易破坏数据库的完整新 B.冗余的存在给数据库的维护增加困难 C.不应该在数据库中存储任何冗余数据 D.冗余数据是指由基本数据导出的数据 C 2.最终用户使用的数据视图称为&#xff08;&…...

从0开始写android 之xwindow

模拟实现android的窗口系统本质上还是在ubuntu 上实现自己的窗口系统&#xff0c; xwindow是一套成熟的解决方案。在ubuntu上使用xwindow的好处之一 是ubuntu自带xwindow的库&#xff0c; 直接引用头文件和库文件。下面来了解下 xwindow的基本函数接口。 参考 https://tronche…...

The Past, Present and Future of Apache Flink

摘要&#xff1a;本文整理自阿里云开源大数据负责人王峰&#xff08;莫问&#xff09;在 Flink Forward Asia 2024上海站主论坛开场的分享&#xff0c;今年正值Flink开源项目诞生的第10周年&#xff0c;借此时机&#xff0c;王峰回顾了Flink在过去10年的发展历程以及 Flink社区…...

多模块应用、发布使用第三方库(持续更新中)

目录: 1、多模块概述&#xff08;HAP、HSP、HAR&#xff09; HAR与HSP两种共享包的主要区别体现在&#xff1a; 2、三类模块&#xff1a; 3、创建项目&#xff1a;项目名&#xff1a;meituan &#xff08;1&#xff09;创建Ability类型的Module&#xff0c;编译后为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的插件&#xff0c;于是立马就安装上了&#xff0c;这里分享一下安装方法 在Epic客户端 - 库 - Fab Library 搜索 Fab 即可安装Fab插件 然后重启引擎&#xff0c;在插件面板勾选即可 然后在窗口这就有了 引擎左下角也会多出一个Fab图标…...

Linux C语言操作sqlite3数据库

一、环境配置 1、下载源码&#xff1a;sqlite-autoconf-3470200.tar.gz 2、解压&#xff0c;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...

大模型呼入机器人有哪些功能特点?(转)

大模型呼入机器人有哪些功能特点&#xff1f;(转) 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 大模型呼入机器人&#xff0c;作为现代通信技术与人工智能深度融合的产物&#xff0c;正逐渐成为企业提升服务…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

云原生时代的系统设计:架构转型的战略支点

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、云原生的崛起&#xff1a;技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深&#xff0c;传统的 I…...