水平スクロールバーをHTMLテーブルに追加する方法はありますか?テーブルがどのように拡大するかに応じて、垂直方向と水平方向の両方にスクロールできるようにする必要がありますが、どちらのスクロールバーも表示できません。
水平スクロールバーをHTMLテーブルに追加する方法はありますか?テーブルがどのように拡大するかに応じて、垂直方向と水平方向の両方にスクロールできるようにする必要がありますが、どちらのスクロールバーも表示できません。
回答:
CSS overflow
プロパティを試しましたか?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
更新
他のユーザーが指摘しているように、これはスクロールバーを追加するには不十分です。
下記のコメントと回答を参照し、賛成票を投じてください。
display: block
ます。
display: block
テーブルを作ります次に、に設定overflow-x:
しauto
ます。
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
素敵できれい。余分なフォーマットはありません。
ここに私のウェブサイトのページからの表のキャプションをスクロールするより複雑な例があります。
white-space: nowrap;
スクロールバーをすぐに確認できます。
white-space: nowrap;
は問題を解決しません(Firefoxでテスト済み)。行を拡張するのに十分なコンテンツ(テキスト)がない場合、行の幅はテーブルの幅よりも小さくなります。
テーブルをDIVでラップし、次のスタイルで設定します。
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
overflow:auto
ここは必要ないようです。とにかく、幅を設定せずにこれを達成することを知っていますか?それは常にhtmlの解決策のようです-幅または高さをハードコードしますが、レイアウトエンジンを持つという点を打ち負かしているようです!
これにはCSS属性「overflow」を使用します。
短い要約:
overflow: visible|hidden|scroll|auto|initial|inherit;
例えば
table {
display: block;
overflow: scroll;
}
上記の解決策のいずれも機能しませんでした。しかし、私はハックを見つけました:
body {
background-color: #ccc;
}
.container {
width: 300px;
background-color: white;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
display: table;
table-layout: fixed;
width: 100%;
}
.hack2 {
display: table-cell;
overflow-x: auto;
width: 100%;
}
<div class="container">
<div class="hack1">
<div class="hack2">
<table>
<tr>
<td>table or other arbitrary content</td>
<td>that will cause your page to stretch</td>
</tr>
<tr>
<td>uncontrollably</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
</div>
</div>
</div>
これは、Serge Stroobandtの回答を改善したものであり、完全に機能します。列数が少ない場合、テーブルがページ幅全体を埋めない問題を解決します。
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
white-space: nowrap;
オプションのようです。
私は同じ問題に遭遇していました。Chrome v31でのみテストされている次のソリューションを発見しました。
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
私は以前の解決策に基づいてこの答えを理解し、それはコメントであり、私の独自の調整を追加しました。これは私にとってレスポンシブテーブルで機能します。
table {
display: inline-block;
overflow-x: auto;
white-space: nowrap;
// make fixed table width effected by overflow-x
max-width: 100%;
// hide all borders that make rows not filled with the table width
border: 0;
}
// add missing borders
table td {
border: 1px solid;
}
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>
//Css to make Horizontal Dropdown
<style>
.search-table{table-layout: auto; margin:40px auto 0px auto; }
.search-table, td, th {
border-collapse: collapse;
}
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
</style>