解决<th>标签内<div>无法占满100%高度的技术问题

问题出在表格单元格（<th>）默认的布局规则上：<th>默认采用表格布局，子元素的height:100%无法正确继承单元格高度，且默认的vertical-align: middle会让子元素居中显示。以下是直接可行的修复方案：

修正后的CSS代码 #

.test {
  display: flex;
  width: 100%;
  justify-content: space-between; /* 根据需求调整文字和图标的排列方式 */
  align-items: center; /* 可选：垂直居中内容，若要完全撑满可改为stretch */
}

th, td {
  padding: 0;
  margin: 0;
  display: flex; /* 关键：把<th>改成flex容器，子元素自动撑满高度 */
  align-items: stretch; /* 强制子元素拉伸至单元格高度 */
}

tr {
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 200px;
  display: block; /* 让表格支持横向滚动 */
  overflow-x: auto;
}

.icon{
  height: 15px;
  width: 15px;
}

thead, tbody {
  display: table;
  width: 100%;
}

核心修改点 #

1. 将<th>设为flex容器：通过display: flex和align-items: stretch，让内部的.test div自动填满<th>的全部高度，不需要再依赖height:100%。
2. 修复表格滚动：原表格的overflow: scroll不生效，因为table默认是表格布局，改为display:block后设置overflow-x:auto，同时让<thead>和<tbody>保持display:table，避免表头和表体错位。
3. 移除无效属性：删除.test里无效的position: top属性。

这样调整后，<th>内的div会完全占满单元格高度，同时表格在列过多时可以横向滚动，表头的文字和图标也能按需求布局。

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