jquery - JQuery の読み込みで更新した後、HTML テーブルの行の幅が広すぎる

Question

お客様の Web サイトで問題が発生しました (Internet Explorer 内のみ、Internet Explorer 9 でテスト済み)。以下のスクリーンショットに示すように、div 内のテーブルが JQuery の load-Function を使用して更新されるたびに、1 つのテーブル行が広すぎます。生成された HTML コードと JQuery 関数を確認しましたが、間違いは見つかりませんでした。

誰かがこのようなものを見たことがありますか、それを解決する方法を知っていますか?

さらに、Web サイトは Firefox と Chrome で問題なく動作します。

テーブルを動的な幅にしたいと思います。ページの現在のレイアウトは、左側の固定幅のナビゲーション領域と右側のコンテンツ領域で構成されており、動的にスケーリングする必要があります。

不正な形式の Web サイトのスクリーンショット

スクリーンショットの 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

私は今、自分で解決策を見つけました。テーブルの生成に使用している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>

コードが書式設定なしで (すべて 1 行に) 記述されている場合、出力はあらゆる状況で問題ありません。

    <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>さらに、列が独自に幅を広げ始めたため、すべてに幅を追加する必要がありました。

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

これにより、テーブル上で明確に定義されたディメンションが強制され、最も悪い動作が修正されます。