Why is using causing problems with height attribute with % value of a table element?

Asked Mar 08 '16 at 09:17

Active Mar 08 '16 at 10:40

Viewed 213 times

I wrote a HTML file to create a table that occupies 80% of the width and height of the browser window. Here is the code without <!DOCTYPE html> that produces the correct output:

<html>
<head>
    <style>
        table, td {border:1px solid black; width:80%; height:80%}
        td {width:33.33%; height:33.33%}
    </style>
</head>
<body>
    <table>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </table>
</body>
</html>

But when I add <!DOCTYPE html>at the top, I don't get the correct output; only the width of the table occupies 80% of the width of the browser window.The height of the table uses the minimum amount of space needed.

I have tried this in Chrome and Edge browsers. I am using VS Code as my editor.

Edit: If I give height a value in px, then it works correctly.

edited Mar 08 '16 at 10:40

asked Mar 08 '16 at 09:17

Shabbir Khan

Add closing tag as well – kristjan reinhold Mar 08 '16 at 09:19
Closing tags are optional for most elements, including ``, so that is not the issue. You have an extra space in your directive. It's supposed to look like this: ` `. I don't know if that is the problem, but it is an error. – Anders Marzi Tornblad Mar 08 '16 at 09:23
head, body { height:100%; } – Alohci Mar 08 '16 at 10:29
Sorry, I forgot to copy-paste
originally. And I only used a space in `
– Shabbir Khan Mar 08 '16 at 10:37
Put in simple terms, modern HTML5 behaves differently than tag soup from the late 1990s. That has nothing to do with your text editor, seriously. – Álvaro González Mar 08 '16 at 10:44

Why is using causing problems with height attribute with % value of a table element?

0 Answers0