HTML Table Row gets too wide after refresh with JQuery load

Question

I have got a problem with a customer website (within Internet Explorer only, tested with Internet Explorer 9). Everytime a table inside a div gets refreshed using JQuery's load-Function a single table row get's too wide as seen in the screenshot below. I already checked the generated HTML Code and the JQuery-Function and I cannot find any mistakes.

Has anyone seen something like this or just know how to solve it?

Furthermore the website work just fine in Firefox and Chrome.

I would like the table to be of dynamic width. The current layout of the page consists of a navigation area on the left with fixed width and content area on the right, which should be scaled dynamically.

Screenshot of the malformatted website

3rd last row is getting too wide

Html-Code for screenshot

<table class="tableBenutzerverwaltung" cellpadding="5px" rules="rows" >
    <thead>
        <tr>
            <td align="right" valign="top" colspan="6"><a href='javascript:showNewUserDialog();' class="NewButton"/></td>
        </tr>
        <tr>
            <th align="left" valign="top">Username</th>
            <th align="left" valign="top">Vorname</th>
            <th align="left" valign="top">Nachname</th>
            <th style="width:16px;">&nbsp;</th>
            <th style="width:16px;">&nbsp;</th>
            <th style="width:16px;">&nbsp;</th>
        </tr>
   </thead>
    <tbody>
            <tr>
                <td align="left" valign="top"><label for="User">UserDomain\JohnDoe</label></td>
                <td align="left" valign="top">John</td>
                <td align="left" valign="top">Doe</td>

                <td align="right" valign="top">&nbsp;</td>
                <td align="right" valign="top"><a href='javascript:showEditUserDialog("b97d5f56-1edc-4dba-b170-f75ccb8f37d2");' class="EditButton"/></td>
                <td align="right" valign="top"><a href='javascript:showDeleteUserDialog("b97d5f56-1edc-4dba-b170-f75ccb8f37d2");' class="Delete"/></td>
            </tr>

JQuery-Code for the refresh of the table

$(function()
{
    $("#dlgBenutzer").dialog(
    {
        modal: true,
        autoOpen: true,
        resizable: true,
        width: 375,
        height: 220,
        title: "@ViewBag.Title",
        buttons:
        {            
            Speichern: function()
            {
                $.post("@Url.Action("AddUser", "Administration")",
                {
                    objectOneId: $('#userId').val(),
                    username: $('#username').val(),
                    vorname: $('#vorname').val(),
                    nachname: $('#nachname').val()
                },
                function(data, status, xhr)
                {
                    $(".UserList").load("@Url.Action("UserList", "Administration")/?random=" + unique_requestid());
                    $('#dlgBenutzer').dialog("close");
                    $('#dlgBenutzer').dialog("destroy");
                    $('#dlgBenutzer').remove();
                });
            },
            Abbrechen: function()
            {
                $(this).dialog("close");
                $(this).dialog("destroy");
            }
        },
        close: function()
        {
            $(this).dialog('destroy').remove();
        }
    });

Hi, could you mention which version(s) of IE this occurs on ? — TWickz
– TWickz, Commented Oct 16, 2012 at 13:38
My guess on the issue is it's got something to do with the markup that's generated. A space or a tab that gets generated might screw up the padding on IE according to my experience. It's weird. Could you please upload a sample project containing the style sheets and icons? would be easier to pinpoint the issue. — TWickz
– TWickz, Commented Oct 16, 2012 at 13:51

KeepAlive · Accepted Answer · 2012-10-16 14:50:51Z

I have found the solution on my own now. It seems to be a problem of MVC3 (.NET) which I am using for generating the table.

If code is written formatted it seems to add some kind of margin to a random row.

    <tbody>
        @foreach (LE.Library.User user in Model.UserCol.OrderBy(u => u.Name))
        {
            <tr>
                <td style="width: 30%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Username))</td>
                <td style="width: 35%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Vorname))</td>
                <td style="width: 35%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Name))</td>
                <td style="width: 16px; text-align: right; vertical-align: top;">&nbsp;</td>
                <td style="width: 16px; text-align: right; vertical-align: top;"><a href='javascript:showEditUserDialog("@user.ID");' class="EditButton"/></td>
                <td style="width: 16px; text-align: right; vertical-align: top;"><a href='javascript:showDeleteUserDialog("@user.ID");' class="Delete"/></td>
            </tr>            
        }
    </tbody>

If code is written without formatting (all on a single line) output is just fine in every situation.

    <tbody>
        @foreach (LE.Library.User user in Model.UserCol.OrderBy(u => u.Name))
        {
            <tr><td style="width: 30%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Username))</td><td style="width: 35%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Vorname))</td><td style="width: 35%; text-align: left; vertical-align: top;">@Html.Raw(Html.Encode(user.Name))</td><td style="width: 16px; text-align: right; vertical-align: top;">&nbsp;</td><td style="width: 16px; text-align: right; vertical-align: top;"><a href='javascript:showEditUserDialog("@user.ID");' class="EditButton"/></td><td style="width: 16px; text-align: right; vertical-align: top;"><a href='javascript:showDeleteUserDialog("@user.ID");' class="Delete"/></td></tr>            
        }
    </tbody>

I don't know where exactly this behaviour comes from. Furthermore I had to add width to every <TD> as columns began to increase their width on their own.

I spent a lot of time with the same problem. The bug appears on Chrome and Opera, but not on other browsers I tried. Good catch!

Niet the Dark Absol · Accepted Answer · 2012-10-16 13:42:56Z

1

Perhaps the easiest way to fix this is to explicitly define the widths you want:

<table style="table-layout:fixed;">
    <colgroup>
        <col style="width: 150px;" />
        <col style="width: 130px;" />
        <col style="width: 170px;" />
        <col style="width: 30px;" span="3" />
    </colgroup>
    <!-- Actual table data goes here -->
</table>

This will force the clearly-defined dimensions on the table, fixing most bad behaviour.

answered Oct 16, 2012 at 13:42

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

KeepAlive Over a year ago

I would like the table to be of dynamic width. The current layout of the page consists of a navigation area on the left with fixed width and content area on the right, which should be scaled dynamically. I have edited the question accordingly

Niet the Dark Absol Over a year ago

You can use percentages instead of fixed numbers, they work too. Just as long as they add up to 100%. You can even mix-and-match, if you want the icon-containing columns to be fixed.

Collectives™ on Stack Overflow

HTML Table Row gets too wide after refresh with JQuery load

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related