Строка таблицы HTML становится слишком широкой после обновления с загрузкой JQuery

У меня возникла проблема с веб-сайтом клиента (только в Internet Explorer, протестирован с Internet Explorer 9). Каждый раз, когда таблица внутри div обновляется с помощью функции загрузки JQuery, одна строка таблицы становится слишком широкой, как показано на скриншоте ниже. Я уже проверил сгенерированный HTML-код и jQuery-функцию и не нашел никаких ошибок.

Кто-нибудь видел что-то подобное или просто знает, как это решить?

Кроме того, веб-сайт прекрасно работает в Firefox и хром.

Я хотел бы, чтобы таблица была динамической ширины. Текущий макет страницы состоит из области навигации слева с фиксированной шириной и области содержимого справа, которая должна быть динамически масштабирована.

Скриншот плохо оформленного сайта

3-й последний ряд становится слишком широким

Html-код для скриншота 

<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">UserDomainJohnDoe</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-код для обновления таблицы 

$(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();
        }
    });
2 3
html jquery html-table asp.net-mvc-3

2 ответа:

Возможно, самый простой способ исправить это-явно определить ширину, которую вы хотите:

<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>
Это заставит четко определенные размеры на столе, фиксируя наиболее плохое поведение.
1

Теперь я нашел решение самостоятельно. Похоже, это проблема MVC3 (.NET), которую я использую для генерации таблицы.

Если код написан в форматированном виде, он, кажется, добавляет некоторую маржу к случайной строке.

    <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>

Если код написан без форматирования (все в одной строке), вывод будет просто прекрасным в любой ситуации.

    <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>
Я не знаю, откуда именно берется такое поведение. Кроме того, я должен был добавить ширину к каждому <TD>, поскольку столбцы начали увеличивать свою ширину. ширина сама по себе.
1