如何使用HTML table标签让带rowspan的表头文本垂直水平双居中

• 方案1：使用内联样式强制覆盖冲突样式
  直接给<th>标签添加带!important声明的内联样式，直接覆盖所有低优先级的默认样式：

<th rowspan="2" colspan="1" style="text-align: center !important; vertical-align: middle !important;">The header</th>

• 方案2：使用自定义CSS类
  你可以单独定义跨行表头的专用样式类，注意将该样式的加载顺序放在框架样式之后，避免被覆盖：

.cross-row-th {
  text-align: center;
  vertical-align: middle;
}

之后给th添加对应类即可：

<th rowspan="2" colspan="1" class="cross-row-th">The header</th>

• 方案3：Bootstrap框架场景直接使用内置类
  如果你使用的是Bootstrap类UI框架，直接同时添加内置的水平、垂直居中类即可，无需额外写样式：

<th rowspan="2" colspan="1" class="text-center align-middle">The header</th>

样式未生效的核心原因是优先级冲突：你之前设置的vertical-align属性被UI框架或者全局表格默认样式覆盖了，通过!important声明、调整样式加载顺序都可以解决该问题。

内容的提问来源于stack exchange，提问作者kebberpee