CODEWITHSUNDEEP
htmlhtml-tableinternet-explorer-11
a344254
a344254

Reputation: 609

Why doesn't this table display correctly in Internet Explorer? Am I doing something wrong?

In Firefox/Chrome, this table displays correctly

<table border="1" style="width: 400px; height: 400px">
        <tr>
            <td colspan="2" rowspan="3" style="height:300px">a</td>
            <td rowspan="2" style="height: 200px">b</td>
        </tr>
        <tr></tr>
        <tr>
            <td rowspan="2" style="height: 200px">c</td>
        </tr>
        <tr>
            <td style="height: 100px">d</td>
            <td style="height: 100px">e</td>
        </tr>
    </table>

like this - with cells b and c being 200px each.

Fiddle

but in Internet Explorer 11 it looks like this - with cell b being stretched by A, and cells d and e being stretched by c

(unfortunately I don't have enough reputation points to post pictures)

I've tried putting fixed sized divs inside, using CSS instead of HTML, etc, but not having any luck. Amy I missing something simple here?

Upvotes: 0

Views: 3444

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The table markup violates the HTML table model as described in HTML5 PR. You can see this if you put <!doctype html><title>test</title> before your code and then test it at http://validator.w3.org – the validator reports the error “Row 2 of a row group established by a tbody element has no cells beginning on it.” Your second row is just <tr></tr>, so it has no cells of its own. Since it is invalid, there is no “correct rendering”, and in fact browsers display the table differently.

The solutions depend on what you are using the table element for. If it is tabular data and needs to be accessible as a table, you need to re-analyze the data and find a valid way of describing it in HTML. If it is just for layout, use some other layout technique. It is common to recommend CSS for everything, but you can in fact use table layout, too, you just need nested tables. E.g., set up a 1 × 2 table and put a, d, and e in a simple table inside the first cell, b and c inside the second cell, and set dimensions suitably.

Upvotes: 2

Sandman
Sandman

Reputation: 94

You are missing nothing. Tables are just rendered different in IE. My advice is that you use regular divs without tables, and style them with CSS. Tables are just not going to be rendered the same cross browser.

Hope this helped!

Upvotes: -1

Related Questions