CODEWITHSUNDEEP
htmlhtml-table
Kosmo零
Kosmo零

Reputation: 4151

How to defeat IE10 weird "feature" that if table height set for 50% it calculates based on window height?

<!DOCTYPE html> 
<html style = "height: 100%;">
    <head>
        <title>test height</title>
    </head>

    <body style = "height: 100%; margin: 0px;">
        <table border = '1' width = '100%' height = '100%'>
            <tbody height = '100%'>
                <tr>
                    <td colspan = '2' height = '1px'>asd</td>
                </tr>
                <tr height = '100%'>
                    <td width = '40%' height = '100%' align = 'center' valign = 'middle'>
                        <table border = '1' width = '90%' height = '50%'>
                            <tbody>
                                <tr><td>this should be 50% in height</td></tr>
                            </tbody>
                        </table>
                    </td>
                    <td>qwe</td>
                </tr>
                <tr><td colspan = '2'>rty</td></tr>
            </tbody>
        </table>
    </body>
</html>

this is my code. this is my calculations enter image description here

The second table has 50% height of window height, instead of cell where it sits. I don't know already how to defeat it. I placed height = '100%' to every possible parent already.

Upvotes: 1

Views: 413

Answers (1)

Fred
Fred

Reputation: 2468

Your problem is the percentages - which I see all over the place. I don't see any fixed height for a parent element. For percentages, we need to have some height of some kind somewhere, excluding the window-height (try to be responsive in your designs). What does 100% Height on the BODY mean? It means that is fills the height of the visible part of the window.

This, essentially means that, whatever the height of the window, our elements will have that height. We don't know the height of the window. But we can put 100%, that is very easy.

In responsive design, the height of the parents are basically on auto. It should auto size the height. The content withing it determines the actual height. This way when you add more to your element, it auto sizes the height, automatically. - but still, we need some height somewhere to make our website look good.

Take this HTML I give you, and paste it in a clean html file. Now run this in whichever browser you choose - looks like it is IE.

    <!DOCTYPE html> 
    <html>
        <head>
            <title>Example</title>
        </head>
        <body style="height:500px; margin:auto;"> <!-- You set the body's height to 100%, so this will determine our dimentions. I use Pixels to make my point.-->
            <!-- GRAY -->
            <table style="width:100%; height:100%; border:1px solid black; background:gray;">
                Main Table. [Height: 500px]
                <!-- GREEN -->
                <tr style="height:60px; background:green;">
                    <td colspan='2'>
                        Row 1, Cell 1 [Height: 60px]
                    </td>
                </tr>
                <!-- RED -->
                <tr style="background:red;">
                    <td style="width: 40%;" align = 'center' valign = 'middle'>
                        Row 2, Cell 1 (Problem Cell) [Height: fills the rest of the space] [Width: 40% of containing cell.]
                        <!-- ORANGE -->
                        <table style="width: 50%; height: 50%; background: orange;">
                            <td>
                                Table that is 50% in height of it's containing cell, and also 50% the width of the containing cell.
                            </td>
                        </table>
                    </td>
                    <td>
                        Row 2, Cell 2 [Height: fills the rest of the space] [Width: fills rest of space.]
                    </td>
                </tr>
                <!-- GREEN -->
                <tr style="height:90px; background:green;">
                    <td colspan='2'>
                        Row 3, Cell 1 [Height: 90px]
                    </td>
                </tr>
            </table>
        </body>
    </html>

Now play with the height on the body. Put percentages, and put pixels. Watch the behaviour.

That is why I say that your element is really the correct height. The borders are those that screw with your mind.

But the real advice is to have some height somewhere.
Rather use CSS @media and change your styles (heights) according to different screen sizes.

A example using @media:

        @media screen and (max-width: 599px)
        {
            body {
                height: 200px;
            }
        }

EDIT: So I assume that this is what you really want: looking like your template:

<html style="height:100%;">
    <head>
        <title>Example</title>
    </head>
    <body style="height:100%; margin:auto;"> <!-- You set the body's height to 100%, so this will determine our dimentions. I use Pixels to make my point.-->
        <!-- GRAY -->
        <table style="width:100%; height:100%; border:1px solid black; background:gray;">
            Main Table. [Height: 500px]
            <!-- GREEN -->
            <tr style="height:60px; background:green;">
                <td colspan='2'>
                    Row 1, Cell 1 [Height: 60px]
                </td>
            </tr>
            <!-- RED -->
            <tr style="background:red;">
                <td style="width: 40%;" align = 'center' valign = 'middle'>
                    Row 2, Cell 1 (Problem Cell) [Height: fills the rest of the space] [Width: 40% of containing cell.]
                    <!-- ORANGE -->
                    <table style="width: 50%; height: 50%; background: orange;">
                        <td>
                            Table that is 50% in height of it's containing cell, and also 50% the width of the containing cell.
                        </td>
                    </table>
                </td>
                <td>
                    Row 2, Cell 2 [Height: fills the rest of the space] [Width: fills rest of space.]
                </td>
            </tr>
            <!-- GREEN -->
            <tr style="height:90px; background:green;">
                <td colspan='2'>
                    Row 3, Cell 1 [Height: 90px]
                </td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 1

Related Questions