使用 position:absolute 修复 table 单元格中的垂直对齐

Question

需要使用固定列创建 table。当设置绝对位置时，带有 'text1' 的单元格没有居中垂直对齐。如何纠正？

<style>
.th {
    position: absolute;
    left: 0; width: 300px;
}
.tbl{ margin-left: 305px;}
td{height:100px;width:200px; vertical-align: middle; text-align:center;}
</style>

<table class=tbl border=1 >
 <tr >
  <td class=th>text1</td>
  <td>text2</td>
  <td>text3</td>
  <td>text4</td>
 </tr>
 </table>

Answer 1

为仅具有 'text1' 绝对位置的单元格设置并在内部 div 中再次设置 display: table-cell 和 vertical-align:middle

<style>
.th{position:absolute;border:none}
.th2 {
   height:100px;
    width:300px;
    background-color:green;
    display: table-cell;
    vertical-align:middle;
    left:-200px;
    position:relative;
}
.tbl{ margin-left: 305px;}
td{height:100px;width:200px;vertical-align:bottom; }
</style>

<table class=tbl border=3 >
 <tr >
  <td class=th> <div class=th2>text1</div></td>
  <td>text2</td>
  <td>text3</td>
  <td>text4</td>
 </tr>
 </table>

使用 position:absolute 修复 table 单元格中的垂直对齐

fix vertical align in table cell with position:absolute

html

css

vertical-alignment