0

I noticed that the table cell vertical-alignment is not working when the position is set to absolute. Am I doing something wrong?

NON WORKING SAMPLE 

    <table>
      <thead >
        <tr>
          <th rowspan="2" style="position:absolute; left:100px; height:200px; vertical-align:bottom; border:solid 1px #CCCCCC;">bottom alignament is not working</th>
          <th style="position:absolute; left:400px;border:solid 1px #CCCCCC;"> a</th>
        </tr>
        <tr >
          <th style="position:absolute; left:500px; border:solid 1px #CCCCCC;"> a</th>
        </tr>
      </thead>
    </table>

The usual approach works fine

WORKING SAMPLE 

    <table style="border:solid 1px #CCCCCC">
      <thead>
        <tr>
          <th rowspan="2" style="vertical-align:bottom; border:solid 1px #CCCCCC">bottom alignament ok</th>
          <th > a</th>
        </tr>
        <tr>
          <th > a</th>
        </tr>
      </thead>
    </table>
Bogdan
  • 1,323
  • 15
  • 15

1 Answers1

1

Vertical align table-cell don't work with position absolute post looks like this?

Wrap the in some wrapper element, for instance. Make the wrapper absolute positioned. 

    <table>
      <thead >
        <tr>
          <span style="position:absolute;">
            <th rowspan="2" style="border:solid 1px #CCCCCC; left:100px; height:200px; vertical-align:bottom;">bottom alignament is not working</th>
          </span>
          <th style="position:absolute; left:400px;border:solid 1px #CCCCCC;"> a</th>
        </tr>
        <tr >
          <th style="position:absolute; left:500px; border:solid 1px #CCCCCC;"> a</th>
        </tr>
      </thead>
    </table>
UnpassableWizard
  • 1,237
  • 11
  • 20
  • I think the span is not closed - not sure if the mixing the span inside a th is ok – Bogdan Nov 14 '17 at 22:10
  • I do understand your're point though - seem it is a feature - based on the answer you mentioned the display for these elements "inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block" 'set'(overrided) to block - strange thing is that the debugger is still showing the display as table-cell (chrome) – Bogdan Nov 14 '17 at 22:18