動的に作成されたテーブルを div に配置しています。構造全体をページ上に任意に配置できます。要件は次のとおりです (自動垂直スクロールバーであり、水平スクロールバーではありません):
- テキストが長い場合に拡大する最小幅
- 最大高さで、行数が多い場合はスクロールバーが表示されます。
HTML:
<div class="container" style="top:5px;">
<table>
<tr><td style="white-space: nowrap;">Lorem ipsum dolor sit amet, consectetur adipisicing elit;</tr></td>
<tr><td>2ed do eiusmod tempor</tr></td>
<tr><td>3ed do eiusmod tempor</tr></td>
<tr><td>4ed do eiusmod tempor</tr></td>
</table>
CSS:
.container {
background-color: grey;
max-height: 50px;min-width: 70px;
overflow-y: auto;
position: absolute;}
コードは IE (10) では意図したとおりに動作しますが、Firefox では垂直スクロールバーが表示されるときに水平スクロールバーが表示されます。Firefox でスクロールバーの幅が正しく計算されていないようです。試してみ ましたが、水平スクロールバーを非表示にします (Firefox で div の自動水平overflow:-moz-scrollbars-vertical;スクロールバーを表示するにはどうすればよいですか? ) が、テキストの一部がスクロールバーの下に隠されているため、垂直スクロールバーは常に存在しますが、テキストは非表示になりません。overflow-y:scroll;
編集
目的の出力は (IE10)
しかし、Firefoxにはこれがあります：
提案されたオーバーフローの非表示は解決策ではありません。
overflow-y:hidden（希望のスクロールはできません）
overflow-x:hiden(文字の一部が隠れています)
