0

我的代码：

<html>
  <head></head>
  <body>
    <div style="position: relative; border:1px black solid; background-color:#00a2e8; min-width: 100px; min-height: 100px; width: 1px; height: 1px">
      <table border="1" style="width:100%; height: 100%;">
        <tr><td style="vertical-align: middle">abc</td></tr>
      </table>
    </div>
  </body>
</html>

在 Firefox 中，它显示得很好，表格填满了整个 div，表格内容垂直居中。

如果我在基于 Webkit 的浏览器上显示它，表格不会填满整个 div，导致标签垂直对齐到顶部。在基于 Webkit 的浏览器上，如何使表格扩展到整个 div？

更具体地说，我对 Android 浏览器很感兴趣。

4

2 回答 2

2

对于您的情况，我通常会使用position:absolute;height:100%;内部元素。但这对表格不起作用，所以我曾经display:block让它像普通的 DIV 一样显示。似乎运作良好。

工作示例

<html>
  <head></head>
  <body>
    <div style="border:1px black solid; background-color:#00a2e8; min-width:100px; min-height:100px;height:100px;width:100px;">
      <table style="display:block;border:1px solid red;height:100%;">
          <tr><td style="vertical-align: center;">abc sdfs dfs df sdf sd fsd fsd fsdf sds dfs df </td></tr>

      </table>
    </div>
  </body>
</html>​
于 2012-12-28T23:41:29.517 回答
1

通过设置td 高度，您可以获得：

http://jsfiddle.net/d7kfR/

这是你需要的吗？

于 2012-12-28T23:43:47.507 回答