使用JQuery加载刷新后，HTML表行变得太宽

我有一个客户网站的问题（仅在Internet Explorer内，使用Internet Explorer 9测试）。每次使用JQuery的load函数刷新div中的表时，一个表的行get太宽，如下面的屏幕截图所示。我已经检查了生成的HTML代码和JQuery函数，没有发现任何错误

有没有人见过这样的事情，或者只是知道如何解决它

此外，该网站在Firefox和Chrome中运行良好

---

我希望桌子的宽度是动态的。页面的当前布局由左侧具有固定宽度的导航区域和右侧应动态缩放的内容区域组成

格式错误网站的屏幕截图

$(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();
        }
    });

屏幕截图的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">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> 

---

解决此问题的最简单方法可能是明确定义所需的宽度：

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

---

这将强制在表上定义清晰的维度，修复大多数不良行为。

我现在自己找到了解决方案。这似乎是我用来生成表的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>

@foreach（Model.UserCol.OrderBy（u=>u.Name）中的LE.Library.User用户）
{
@Html.Raw（Html.Encode（user.Username））
@Html.Raw（Html.Encode（user.Vorname））
@Html.Raw（Html.Encode（user.Name））
}

如果代码是在没有格式化的情况下编写的（全部在一行上），那么在任何情况下输出都是正常的

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

@foreach（Model.UserCol.OrderBy（u=>u.Name）中的LE.Library.User用户）
{
@Html.Raw（Html.Encode（user.Username））@Html.Raw（Html.Encode（user.Vorname））@Html.Raw（Html.Encode（user.Name））
}

---

我不知道这种行为到底是从哪里来的。此外，我不得不为每个

增加宽度，因为列开始自行增加宽度。

嗨，你能提到这发生在哪个版本的IE上吗？请参阅编辑的帖子（用IE 9测试）。我猜这与生成的标记有关。根据我的经验，生成的空间或选项卡可能会使IE上的填充空间变得混乱。真奇怪。你能上传一个包含样式表和图标的示例项目吗？更容易确定问题。我希望表格具有动态宽度。页面的当前布局由左侧具有固定宽度的导航区域和右侧应动态缩放的内容区域组成。我已经编辑了这个问题。你可以用百分比代替固定数字，它们也可以。只要它们加起来是100%。如果你想修复包含列的图标，你甚至可以混合搭配。我花了很多时间处理同样的问题。这个bug出现在Chrome和Opera上，但在我尝试的其他浏览器上没有。抢手货