Question

我的客户网站出现问题（仅限Internet Explorer，使用Internet Explorer 9进行测试）。每次使用JQuery的load函数刷新div中的表时，单个表行的范围太宽，如下面的屏幕截图所示。我已经检查了生成的HTML代码和JQuery-Function，但我找不到任何错误。

有没有人见过这样的东西或者只知道如何解决它？

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

我希望表格具有动态宽度。页面的当前布局包括左侧的导航区域和右侧的固定宽度和内容区域，应该动态缩放。

格式错误的网站的屏幕截图

3rd last row is getting too wide

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

用于刷新表格的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();
        }
    });

Answer 1

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

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

这会强制在桌面上明确定义尺寸，从而解决大多数不良行为。

Answer 2

我现在已经找到了解决方案。这似乎是我用于生成表的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>添加宽度。

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

2 个答案: