Home/ Questions/Q 9047453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T11:54:49+00:00

My code: <html> <head></head> <body> <div style=position: relative; border:1px black solid; background-color:#00a2e8; min-width: 100px;

  • 0

My code:

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

In Firefox, it displays fine, the table filling up the entire div, having the table contents vertially centered.

If I display it on Webkit-based browser, the table doesn’t fill the entire div, causing the label to be vertically aligned to the top. How do I make the table expand to the whole div on Webkit-based browser?

More specifically, I am interested in Android browser.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For your situation, I would normally use position:absolute;height:100%; for the inner element. But that didn’t work for a table, so I used display:block to make it display like a regular DIV. Seems to work well.

    Working example

    <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>​
    • 0