HTML、CSS表格的斜表头样式设置title 画对角线

server/2024/12/15 19:04:31/
htmledit_views">

我里面有用到layui框架的影响,实际根据你自己的框架来小调下就可以

效果如下

上代码

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


http://www.ppmy.cn/server/150416.html

相关文章

C# 实现 10 位纯数字随机数

本文将介绍如何用 C# 实现一个生成 10 位纯数字随机数的功能。以下是完整的代码示例&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace RandomTset {class Program{// 使用GUID作为种子来创建随机数生成器static…

MAVEN--Maven的生命周期,pom.xml详解,Maven的高级特性(模块化、聚合、依赖管理)

目录 &#xff08;一&#xff09;Maven的生命周期 1.Maven的三套生命周期 2.Maven常用命令 &#xff08;二&#xff09;pom.xml详解 &#xff08;三&#xff09;Maven的高级特性&#xff08;模块化、聚合、依赖管理&#xff09; 1.Maven的依赖范围 2.版本维护 3.依赖传…

使用DuckDB 加载和清洗数据

DuckDB CLI是允许用户直接从命令行与DuckDB交互的工具。前文你看到了如何使用Python与DuckDB交互。但是&#xff0c;有时你只是想直接使用数据库—例如在创建新表、从不同数据源导入数据以及执行与数据库相关的任务时。在这种情况下&#xff0c;直接使用DuckDB CLI要有效得多。…

解决Logitech G hub 无法进入一直转圈的方案(2024.12)

如果你不是最新版本无法加载尝试以下方案&#xff1a;删除AppData 文件夹下的logihub文件夹 具体路径&#xff1a;用户名根据实际你的请情况修改 C:\Users\Administrator\AppData\Local 如果你有通过lua编译脚本&#xff0c;记得备份&#xff01;&#xff01; ↓如果你是最新…

ElementEye,网页分析器

介绍 我们经常使用Python写爬虫&#xff0c;爬到网页数据之后&#xff0c;就需要用beautifulSoup进行解析。因为写爬虫并不是我的主营工作&#xff0c;大多数只是用来分析一下想要的数据而已&#xff0c;所以经常会忘记beautifulSoup的用法。 同时&#xff0c;我们总是分析页面…

ASP.net mvc--ECharts图表框架

1、资源包导入流程如下&#xff1a; 解决方案管理器中-》右击选择管理NuGet资源包-》浏览输入&#xff1a;ECharts-》下载最新版本。 2、前台页面加载调用echart图表 拖动echart-all.js到需要被调用的页面。生成第一个页面图表 <div id"main" style"width…

题目 1688: 数据结构-字符串插入

第一种方式字符串 #include<iostream> #include<cstring> #include<algorithm> using namespace std; int main(){string s1,s2;int n;cin>>s1>>s2>>n;s1.insert(n-1,s2);cout<<s1<<endl;return 0; } 第二种方式字符数组 …

【开源免费】基于Vue和SpringBoot的渔具租赁系统(附论文)

本文项目编号 T 005 &#xff0c;文末自助获取源码 \color{red}{T005&#xff0c;文末自助获取源码} T005&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 渔…