FirefoxでCSSでオーバーフローするテーブル
-
22-07-2019 - |
質問
テーブルの動作に問題があります。コンテンツが溢れ続け、コンテンツを制限しようとしても期待した効果が得られません。
これは私のマークアップです:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
それからいくつかのスタイルがあります。 tdの
はオーバーフローしていますが、 overflowをhidden / auto
に設定する運はありませんでした。テーブルを含む hastable
クラスでのオーバーフローの設定は幸運でした。しかし、 width
を尊重するために Firefox を取得するのにまだ問題があります。 3つの列の分布: 30%、35%、35%
。また、 min-width
を設定しようとしましたが、まだ運がありません。ページにはこれらのテーブルがいくつかあり、それぞれが独自の幅を取ります。このテーブルの混乱について何か助けがありますか?
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
解決
テーブルのスタイル設定は難しいことで有名です。これをCSSに追加してみてください:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
また、実際のHTML COL
/ COLGROUP
要素を使用して列を定義することもお勧めします。
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
これにもかかわらず、データがオーバーフローしているセルは 、収容するセル、行、およびテーブルを強制的に収まるように拡張することに注意してください。 CSS overflow:auto
/ hidden
/ scroll
はセルに影響しません。
参照:
他のヒント
divでテーブルをラップし、divにオーバーフローを設定します。
<div style='overflow:scroll;'>
<table>
...
</table>
</div>
所属していません StackOverflow