Skip to content
网游世界
网游世界

吾生有涯,而知无涯。

  • 首页
  • PHP
    • ThinkPHP
    • FastAdmin
    • webman
    • CodeIgniter
  • JavaScript
    • jQuery
    • AdminLTE
  • Free Pascal
  • Java
    • JeeSite
    • 若依
    • ruoyi-vue-pro
  • 其它
    • 操作系统
    • 树莓派
    • 前端
    • Null
  • 关于
网游世界

吾生有涯,而知无涯。

FastAdmin bootstrapTable 设置斜线表头

3Vshej, 2026年4月14日 周二2026年4月14日 周二
thead tr th:first-child .th-inner{
  position: relative;
  height:64px;
  background:url("__CDN__/assets/img/s-line.png") no-repeat center center;
  background-size:100% 100%;
  width:200px!important;
  padding: 0 !important;
}
.km{
  position:absolute;
  left:29px;
  top:30px;
  z-index: 1;
}
.bm{
  position:absolute;
  right: 29px;
  top: 8px;
  z-index: 1;
}

/* 修复:不要隐藏第一个表头,而是让它可见 */
.fixed-table-header .table > thead:first-child > tr:first-child > th:first-child{
  visibility: visible !important;
}

/* 主表头的第一个单元格需要特殊处理 */
#table thead tr th:first-child{
  visibility: visible !important;
}

.fixed-table-body #table{margin-top:-66px!important;}
.fixed-table-body-columns{top:66px!important;}
.fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner{white-space: normal;}
// 设置斜线表头(同时处理主表格和固定列表格)
var setDiagonalHeader = function() {
  $("thead tr th:first-child .th-inner").html('<span class="km">科目</span><span class="s-line"></span><span class="bm">部门</span>');
  // 处理固定列的表头
  $(".fixed-table-header-columns table thead tr th:first-child .th-inner").html('<span class="km">科目</span><span class="s-line"></span><span class="bm">部门</span>');
};
setDiagonalHeader();

 

斜线表头
斜线表头
.bg_add{
  padding:0!important;
  height:68px!important;
  background:url("__CDN__/assets/img/four-head.png") no-repeat center center #fff;
  background-size:100% 100%;
  position: relative;
}
.bg_add span{position:absolute;}
.money{top:7px;left:91px;}
.depart{top:7px;left:165px;}
.list{left:108px;bottom:2px;}
.project{left:12px;bottom:2px;}
[data-field="project"]{width:204px;}

/* 修复:不要隐藏第一个表头,而是让它可见 */
.fixed-table-header .bg_add{
  visibility: visible !important;
}
// 设置斜线表头(同时处理主表格和固定列表格)
var setFourWayHeader = function() {
  // 主表格的第一个表头单元格
  $('#table thead tr th[data-field="sn"] .th-inner').addClass('bg_add').html('<span class="money">金额</span><span class="depart">部门</span><span class="list">科目</span><span class="project">项目</span>');
  // 固定列的表头
  $('.fixed-table-header-columns table thead tr th[data-field="sn"] .th-inner').addClass('bg_add').html('<span class="money">金额</span><span class="depart">部门</span><span class="list">科目</span><span class="project">项目</span>');
};
setFourWayHeader();
斜线表头2
斜线表头2

所需文件:

 

斜线
斜线

相关文章:

  1. FastAdmin table 跨行跨列处理 在开发中,需要对表格跨行跨列处理,也就是说,需要合并单元格;这里介绍使用方式。...
  2. FastAdmin Summernote 清除格式 需求是这样的,录入内容时,大多是从 Word 中粘贴过来的,内容很少,但实际代码却很多,存储时,提示......
  3. FastAdmin 载入语言包 在开发中需要使用其他模块的语言包,你可以使用以下方式:...
  4. FastAdmin 表格移除编辑、删除按钮 FastAdmin 默认表格渲染行操作按钮时,会附加编辑、删除功能,移除时使用以下方法。...
FastAdmin PHP FastAdmin 框架表格

文章导航

Previous post

近期文章

  • FastAdmin bootstrapTable 设置斜线表头
  • AI 是怎么回事
  • 再说 Windows 安装 OpenClaw
  • FastAdmin 表格移除编辑、删除按钮
  • Let’s Encrypt 修改绑定的域名

归档

  • 2026 年 4 月
  • 2026 年 3 月
  • 2026 年 2 月
  • 2025 年 12 月
  • 2025 年 10 月
  • 2025 年 8 月
  • 2025 年 7 月
  • 2025 年 6 月
  • 2025 年 5 月
  • 2025 年 4 月
  • 2025 年 3 月
  • 2025 年 2 月
  • 2025 年 1 月
  • 2024 年 12 月
  • 2024 年 11 月
  • 2024 年 10 月
  • 2024 年 9 月
  • 2024 年 8 月
  • 2024 年 7 月
  • 2024 年 6 月
  • 2024 年 5 月
  • 2024 年 4 月
  • 2024 年 3 月
  • 2024 年 2 月
  • 2024 年 1 月
  • 2023 年 12 月
除非特殊说明,本站作品采用知识共享署名 4.0 国际许可协议进行许可。
豫公网安备 41010402002622号 豫ICP备2020029609号-3
©2026 3Vshej