Internet Exporer 11 rendering table improperly

Question

on my page I have a table with a few elements in it, but it messes up in Internet Explorer 11. Any help appreciated

Here is what it looks like in VS:

In Chrome:

And here IE:

My Code:

    <table>
        <tr>
            <td style="width: 50%; text-align: left"><br /><br /><br />
                <asp:Label ID="lbl_dm_rvi" runat="server" Text="sometext RVI"></asp:Label><br />
                <asp:Label ID="lbl_dm_odv" runat="server" Text="sometext ODV"></asp:Label>
            </td>
            <td style="width: 50%; text-align: right; text">
                <asp:Label ID="lbl_hochrechnung" runat="server" Text="Hochrechnung_RX_SM_KVBEZ"></asp:Label><br />
                <asp:Label ID="lbl_modul1" runat="server" Text="Modul 1"></asp:Label><br />
                <asp:Label ID="lbl_modul_30" runat="server" Text="Modul 3.0"></asp:Label><br />
                <asp:Label ID="lbl_modul_31" runat="server" Text="Modul 3.1"></asp:Label><br />
                <asp:Label ID="lbl_modul3" runat="server" Text="Modul 3"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="klammer.png" style="width: 400px"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <asp:Label ID="lbl_modul2" runat="server" Text="Modul 2"></asp:Label><br />
                <asp:Label ID="lbl_odv" runat="server" Text="ODV"></asp:Label><br />
                <asp:Label ID="lbl_modul2a" runat="server" Text="Modul 2a"></asp:Label><br />
                <asp:Label ID="lbl_modul4" runat="server" Text="Modul 4"></asp:Label><br />
                <asp:Label ID="lbl_modul4a" runat="server" Text="Modul 4a"></asp:Label>
            </td>
        </tr>
    </table>

Set the maximum table width on the table tag. – Aristos Aug 08 '16 at 11:35 — Aristos, Aug 08 '16 at 11:35

score 1 · Accepted Answer · edited May 23 '17 at 12:01

What I see at the first is that the table on IE is take the full width, the other two are not.

This is usually done because its browser did not have the same default setting for all elements.

A quick solution is to set the width on the table as

<table style="width: 300px;" >

so you not left it random.

You can also try to use any "Reset CSS" (like Eric Meyer’s) thats try to bring all browser styles to the same point.

Related: What is the easiest or fastest way to make CSS render the same in all browsers

Internet Exporer 11 rendering table improperly

1 Answers1