Bootstrap DataTable 旋转表头标签如何实现底部居中对齐

云原生阿岚

2026-10-24

多级DataTable旋转表头底部居中对齐调整方案

现有基础配置

目前已完成的可复用配置无需调整：

表格结构：搭建了带跨行跨列合并的多级表头HTML，通过.rotated-text类承载旋转表头样式、.vert-align类实现垂直方向对齐
基础样式：已为旋转表头单元格设置140px固定高度，通过transform:rotate(-90deg)实现文本逆时针旋转，清除了单元格默认内边距
初始化配置：已开启响应式布局，配置copy/excel/pdf/csv导出按钮，关闭了默认排序功能

核心调整步骤

1. 优化表头单元格定位基准

给带.vert-align类的表头单元格补充样式，解决默认样式覆盖、旋转元素被裁切的问题：

table.dataTable thead th.vert-align {
  position: relative;
  text-align: center;
  overflow: visible;
  /* 提高选择器优先级，确保固定高度生效 */
  height: 140px !important;
  padding: 0 !important;
}

2. 重写旋转文本的定位逻辑

替换原有仅带旋转属性的.rotated-text样式，通过组合定位、偏移、旋转的规则实现设计要求的底部居中效果：

.rotated-text {
  /* 禁止文本换行，避免旋转后布局错乱 */
  white-space: nowrap;
  /* 脱离文档流，基于父级表头单元格做定位 */
  position: absolute;
  /* 水平方向对齐到父级单元格的水平中线 */
  left: 50%;
  /* 垂直方向距离父级单元格底部留10px间距，可根据设计稿要求微调数值 */
  bottom: 10px;
  /* 组合变换：先向左偏移自身宽度的50%抵消定位偏移，再逆时针旋转-90度 */
  transform: translateX(-50%) rotate(-90deg);
  /* 以元素中心为旋转基准，避免旋转后位置错位 */
  transform-origin: center center;
}