исправить вертикальное выравнивание в ячейке таблицы с положением: абсолютное - PullRequest
Новая
       41

исправить вертикальное выравнивание в ячейке таблицы с положением: абсолютное

0 голосов
/ 25 мая 2020

Требуется создать таблицу с фиксированным столбцом. При установке абсолютного положения ячейка с '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>

1 Ответ

0 голосов
/ 25 мая 2020

Установить для ячейки с 'text1' только абсолютную позицию, а во внутреннем div снова отобразить: 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>
...