1

幅 60% の div と、overflow-x をスクロールするように設定しています。

<div style="width: 60%; overflow-x: scroll">
</div>

その中に、1行とその行内のセルの動的数(th's)を持つテーブルがあります。

<div style="width: 60%; overflow-x: scroll">

    <table>
        <thead>
            <tr>
                <th style="width: 20px;">
                    <input type="checkbox" />
                </th>
                <th style="width: 300px">Name</th>
                <th style="width: 300px">Email</th>
                @foreach (Group group in groups)
                {
                    <th style="width: 150px">@group.Name</th>
                }
            </tr>
        </thead>
    </table>

</div>

これがレンダリングされると、2 つの問題が発生します

1) テーブルはその幅を div の 100% に調整します。私が望むのは、テーブルをdivよりもはるかに広くすることです。そのため、div に「overflow-x: scroll」があり、テーブルを水平方向にスクロールできます。

2) セル (th's) は、指定した幅でレンダリングされません

注: 動的に作成された th 内の "@group.Name" は、通常、th に指定した 150px 未満である必要があります。

この2つの問題を解決するにはどうすればよいですか？

4

3 に答える 3

1

<th nowrap style="...">セルをラップするのではなく、強制的に広げてみてください。

于 2013-09-27T20:04:04.473 に答える
1

ご覧のとおり、各列の幅がわかっているので、テーブルの合計幅がわかります。表の合計幅が 1000px の場合、以下を追加します。

style="width:1000px"

to table タグで問題が解決するはずです。このアプローチを Chrome でテストしたところ、うまく機能しました。

于 2013-09-27T20:19:26.247 に答える
1

原因は、 width をallTDsに設定していることです。

テーブルがブラウザーによってレンダリングされると、エンジンは各 TD の幅をテーブル幅に一致するように計算します。オーバーフロー/不足しているピクセルをテーブル列に分配し、それらを圧迫または引き伸ばします。分布は列の幅 (パーセンテージ) に基づいており、列が大きいほどピクセルの絶対数が大きくなります。テーブルに指定されていない列がある場合width、この分布は明示的な幅を持つ列を無視して、それらの列にのみ当てはまります。

確かに、テーブルが CSS で計算されwidth: auto、幅が設定されている場合、または設定されていない場合、列はそのサイズのままで、テーブルの幅は列のサイズの合計になります (テーブルの境界線などを加えたもの)。

テーブルを修正するには 2 つの方法があります。

  1. テーブルの CSS 幅を に設定しますauto。

  2. 少なくとも 1 つはピボット列TDを持たない必要があります。width

どちらか、または両方を使用してください。

于 2013-09-27T20:27:53.300 に答える