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 に答える