设置th固定高度后表格tbody首行td上边框不显示bug如何解决？

问题根因 #

你遇到的边框消失问题是两个样式叠加导致的：

• 表格设置了border-collapse: collapse，thead的th和tbody首行td的相邻边框会发生重叠，渲染位置完全重合
• th被设置了position: relative，相对定位元素的默认堆叠层级高于普通文档流的td元素，th的灰色背景会直接覆盖住重叠位置的td上边框

你观察到的两个现象也和这个逻辑吻合：

• 当th自然高度高于设置的38px固定高度时，th会被内容撑开，实际底部边缘低于td的上边框位置，背景不会覆盖到td的边框区域，边框就正常显示
• 删除th的固定高度后，th高度由内容自然撑开，同样不会出现背景覆盖td边框的情况，边框正常显示

解决方案 #

你可以任选以下其中一种方案修复：

1. 保留现有定位设置的前提下，给th添加下边框样式：

.table.summary-style thead th {
  border-bottom: 1px solid #666;
}

因为边框合并规则，新增的th下边框会和td的上边框合并为1px，不会出现双倍边框的问题，且边框在th层级渲染，不会被背景覆盖。

2. 如果不需要用th做绝对定位的父容器，直接删除th的position: relative属性即可，th回归普通文档流层级，不会再覆盖td的边框。

3. 若要同时保留th的相对定位且不想给th加下边框，也可以给tbody首行td设置position: relative，让td和th堆叠层级一致，边框就会正常渲染。

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