Home/ Questions/Q 8750563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:53:20+00:00

I have a html page with a <table> set 100% X 100% http://oxide.co.il/test/table1.htm .

  • 0

I have a html page with a <table> set 100% X 100% http://oxide.co.il/test/table1.htm. I’m using it because I need the page to be in full screen and fit all types of screens, also the page shouldn’t have scroll.

I want the table to stay exactly like it is (50% left size, 50% right side and 10% bottom) but when I’m adding content into the table, the table readjust its size, and it’s bad for me.

For example when I’m adding a big image it’s look like this: http://oxide.co.il/test/table2.htm (Right side is smaller and bottom is gone)

I wish the image will fit into the <td>‘s original size. When I added style="width:100%;" for the image, it still breaks the table: http://oxide.co.il/test/table3.htm (Bottom area isn’t showing)

When I have a big <div> inside the <td>, it will also break the table:
http://oxide.co.il/test/table4.htm (I know the <div> is in px, I can’t change it to percentages)

How can I make the content fit into the table without it readjusting the size?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Tables aren’t meant for layouts. As it was stated in the comments on your question, it becomes a lot more simple if you just use div’s. The following code does what you want, without tables:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
        <style>
            html, body{
                margin: 0;
            }

            .container {
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .span50 {
                width: 50%;
            }

            .span100 {
                width: 100%;
            }

            .sheer90 {
                height: 90%;
            }

            .sheer10 {
                height: 10%;
            }

            .span50, .span100,
            .sheer90, .sheer10 {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="span100 sheer90">
                <div class="span50">
                    <img src="http://placehold.it/1200x1200" width="1200px" height="1200px" alt="" />
                </div>
                <div class="span50"></div>
            </div>
            <div class="span100 sheer10">
                Test
            </div>
        </div>
    </body>
</html>​
    • 0