0

Need create table with fixed column. When set absolute position then cell with 'text1' don't have center vertical align. How to correct?

<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>
imyf
  • 1
  • 1
  • give .th a height – Dariun May 25 '20 at 16:50
  • Not sure what's going on with the `position: absolute` but you can add a `line-height` to vertically center the text within the table cell. Note: This is not the best or the cleanest way to do it. – sagar1025 May 25 '20 at 16:52
  • Does this answer your question? [Vertical align table-cell don't work with position absolute](https://stackoverflow.com/questions/8896965/vertical-align-table-cell-dont-work-with-position-absolute) – M.A Shahbazi May 25 '20 at 16:52
  • 1
    Since it is not part of your table-layout anymore, you can relay on flex or grid. flex example: `.th { position: absolute; left: 0; width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; }` – G-Cyrillus May 25 '20 at 16:55

1 Answers1

0

Set for cell with 'text1' only absolute position and in inner div set again display: table-cell and 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>
imyf
  • 1
  • 1