当前位置: 首页 > 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;正逐渐成为企业提升服务…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

LangChain【6】之输出解析器:结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

基于Java的离散数学题库系统设计与实现:附完整源码与论文

JAVASQL离散数学题库管理系统 一、系统概述 本系统采用Java Swing开发桌面应用&#xff0c;结合SQL Server数据库实现离散数学题库的高效管理。系统支持题型分类&#xff08;选择题、填空题、判断题等&#xff09;、难度分级、知识点关联&#xff0c;并提供智能组卷、在线测试…...