水平スクロールを備えたHTMLテーブル(最初の列固定)
-
25-09-2019 - |
質問
私は、固定された最初の列(および水平オーバーフローのあるテーブルの残りの部分)でテーブルを作る方法を考えようとしてきました。同様の質問がある投稿を見ました。しかし、固定列ビットは解決されていないようです。ヘルプ?
解決
私はそうするようなスタイルのようなテーブルを持っています:
<table style="width:100%; table-layout:fixed">
<tr>
<td style="width: 150px">Hello, World!</td>
<td>
<div>
<pre style="margin:0; overflow:scroll">My preformatted content</pre>
</div>
</td>
</tr>
</table>
他のヒント
どうですか:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px; /*ie7*/
}
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
padding: 10px;
width: 100px;
}
.fix {
position: absolute;
*position: relative; /*ie7*/
margin-left: -100px;
width: 100px;
}
.outer {
position: relative;
}
.inner {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
margin-left: 100px;
}
<div class="outer">
<div class="inner">
<table>
<tr>
<th class=fix></th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th class="fix">Col 5</th>
</tr>
<tr>
<th class=fix>Header A</th>
<td>col 1 - A</td>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td class=fix>col 5 - A</td>
</tr>
<tr>
<th class=fix>Header B</th>
<td>col 1 - B</td>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td class=fix>col 5 - B</td>
</tr>
<tr>
<th class=fix>Header C</th>
<td>col 1 - C</td>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td class=fix>col 5 - C</td>
</tr>
</table>
</div>
</div>
このjsbinでテストできます。 http://jsbin.com/uesecel/4/edit
jquery datatablesプラグインを使用すると、固定ヘッダーと列をサポートします。この例は、固定列のサポートをHTMLテーブル「例」に追加します。
http://datatables.net/extensions/fixedcolumns/
2つの固定列の場合:
http://www.datatables.net/release-datatables/extensions/fixedcolumns/examples/two_columns.html
Skubeのアプローチに基づいて、必要なCSSの最小限のセットは次のとおりです。
.horizontal-scroll-except-first-column {
width: 100%;
overflow: auto;
margin-left: 20em;
}
.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
position: absolute;
width: 20em;
margin-left: -20em;
}
.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
/* Without this, if a cell wraps onto two lines, the first column
* will look bad, and may need padding. */
white-space: nowrap;
}
HTMLで:
<div class="horizontal-scroll-except-first-column">
<table>
...
</table>
</div>
このjQueryプラグインを見てください:
垂直(固定ヘッダー行)を追加します または水平 (最初の列を修正)既存のHTMLテーブルへのスクロール。スクロールの両方のケースを確認できるデモがあります。
所属していません StackOverflow