1

私はかなり複雑な問題に取り組んでおり、問題を短いコード例にまとめようとしました。

jQuery を使用してテーブルに新しいテーブルを作成し、<tr>colspan を列の合計数に設定すると、テーブル セルの幅 (コードでは設定されていません) が変更されます。これは IE9 で発生しますが、Chrome では発生しません。コードでセル サイズを明示的に指定できることは理解していますが、使用しているソリューションでは実際にはできません。

コードは次のとおりです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript" ></script>

<script type="text/javascript">
    var expanded = false;
    var $detailsRow;
    $(document).ready(function(){
        //toggle the details row
        $(".selectable-row").click(function(){
            if(expanded){
                $detailsRow.remove();
                expanded = false;
            }else{
                $detailsRow = $("<tr class=\"child-row\"><td colspan=\"4\">");
                $detailsRow.find("td").text("Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello");
                $detailsRow.insertAfter($(this));
                expanded = true;
            }
        });
    });
</script>

<div style="width:1000px">
    <table border="1" style="width:100%">
        <tr class="selectable-row">
            <td>2012-09-03 11:33</td>
            <td>This is the 2nd column</td>
            <td>The 3rd column</td>
            <td>The last one</td>
        </tr>
    </table>
</div>

微妙な違いであることに注意してください。2 番目のセルは拡張されており、日付セルはわずかに小さくなっています。 微妙な違いであることに注意してください。2 番目のセルは拡張されており、date-cell はわずかに小さくなっています。

誰かがなぜこれが起こっているのか、そして修正があるかどうかを説明できますか? 何とかセルの内部をdivでラップするかもしれません。私はできる限りそれを試しました。

4

2 に答える 2

1

表示されているのは、ピクセルの丸めエラーです。 ここにそれについて話している別のリンクがあります。

コードを取得して js フィドルに投稿すると、div 幅が 1000 の場合に前述のエラーが発生しますが、1001 や 1002 ではなく、1003、1004 ではエラーが発生し、1005 ではエラーが発生します...列番号を 3 に変更すると、Chrome は 1001、1002 のエラーも表示します。

テーブルの寸法自体は変更されないため、 col-span を追加したときにテーブルの列幅がどのように再計算されるかはわかりません。これにより、そもそもシフトが発生します。

また、KK が述べたように、width: 25% を設定しても問題は解決しました。

于 2012-09-11T15:53:09.303 に答える
0

セルの幅を制御するための css を適用しましたか?セルに css プロパティを追加した後、小さい/大きいのを止めるためです。

<style type="text/css">
    .selectable-row td { width: 25%; }
</style>
于 2012-09-11T15:44:28.417 に答える