CSS 垂直对齐应该在单元格位置绝对时工作,或者这是浏览器中的错误/间隙



我注意到当位置设置为绝对时,表格单元格垂直对齐不起作用。我做错了什么吗?

非工作样品

    <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>

通常的方法工作正常

工作样品

    <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>

垂直对齐的表格单元格不适用于位置绝对帖子看起来像这样?

例如,将包装器元素包装

在某个包装器元素中。使包装器绝对定位。

    <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>

相关内容

最新更新