固定または固定された左列とスクロール可能な本文を含むHTMLテーブルを作成する
固定/固定の左列とスクロール可能な本文を持つHTMLテーブルを作成するにはどうすればいいですか？
簡単な解決策が必要です。私はそれが他のいくつかの質問に似ていることを知っています。
しかし、フリーズするには左側の1列だけが必要で、単純でスクリプトのないソリューションをお勧めします。
列だけが水平方向にスクロールするテーブルが必要な場合は、最初の列をposition: absoluteし（そしてその幅を明示的に指定し）、次にテーブル全体をoverflow-x: scrollブロックでラップすることができます。 IE7でこれを試しても気にしないでください。
関連するHTMLとCSS：
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table>
</div>このは、fixedを作成する興味深いjQueryプラグインです。 ）ヘッダーおよび/または列。実際の動作を確認するには、デモページで固定列をtrueに設定してください。
固定幅の左列の場合、最善の解決策は Eamon Nerbonne によって提供されます。
可変幅の左カラムの場合、私が見つけた最良の解決策は、2つの同一のテーブルを作成し、一方を他方の上にプッシュすることです。デモ： http://jsfiddle.net/xG5QH/6/ 。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
ちなみに、これは頭と横を固定してスクロール可能な表です。
少し遅れましたが、自分自身で解決策を試すときにこのスレッドに遭遇しました。最近のブラウザを使用していると仮定して、幅を確実に一致させるためにCSS calc（）を使用した解決策を思いつきました。
.table-fixed-left table,
.table-fixed-right table {
border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
border: 1px solid #ddd;
padding: 5px 5px;
}
.table-fixed-left {
width: 120px;
float: left;
position: fixed;
overflow-x: scroll;
white-space: nowrap;
text-align: left;
border: 1px solid #ddd;
z-index: 2;
}
.table-fixed-right {
width: calc(100% - 145px);
right: 15px;
position: fixed;
overflow-x: scroll;
border: 1px solid #ddd;
white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
padding: 5px 10px;
}<div class="table-fixed-left">
<table>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Header with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
</table>
</div>
<div class="table-fixed-right">
<table>
<tr>
<th>Header</th>
<th>Another header</th>
<th>Header</th>
<th>Header really really really really long</th>
</tr>
<tr>
<td>Info Long</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</table>
</div>これが誰かに役立つことを願っています！
左の列をposition: fixedでスタイルします。 （おそらくtopとleftスタイルを使用して正確にどこに表示されるかを制御したいと思うでしょう。）
私はEarmon Nerbonneの答えを取り、それを全幅いっぱいのテーブルで機能するように編集しました。
<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
.headcol:before {
content:'Row ';
}
.long {
background:yellow;
letter-spacing:1em;
}
</style></head><body>
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div></div>
</body></html>
ただし、固定列の幅はまだ設定値である必要があります。
sticky位置を使うことができます。これがサンプルコードです。これはHTML/CSSソリューションです。いいえjsは必要ありません。
HTML：
<div class="view">
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th class="sticky-col first-col">Number</th>
<th class="sticky-col second-col">First Name</th>
<th>Last Name</th>
<th>Employer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">1</td>
<td class="sticky-col second-col">Mark</td>
<td>Ham</td>
<td>Micro</td>
</tr>
<tr>
<td class="sticky-col first-col">2</td>
<td class="sticky-col second-col">Jacob</td>
<td>Smith</td>
<td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
</tr>
<tr>
<td class="sticky-col first-col">3</td>
<td class="sticky-col second-col">Larry</td>
<td>Wen</td>
<td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS：
.view {
margin: auto;
width: 600px;
}
.wrapper {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100px;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 100px;
}
Bootplyコード： https://www.bootply.com/g8pfBXOcY9
もっと複雑なものを開発していて、複数の列を左に固定または固定したい場合は、おそらく次のようなものが必要になります。
.wrapper {
overflow-x: scroll;
}
td {
min-width: 50px;
}
.fixed {
position: absolute;
background: #aaa;
}<div class="content" style="width: 400px">
<div class="wrapper" style="margin-left: 100px">
<table>
<thead>
<tr>
<th class="fixed" style="left: 0px">aaa</th>
<th class="fixed" style="left: 50px">aaa2</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed" style="left: 0px">aaa</td>
<td class="fixed" style="left: 50px">aaa2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td class="fixed" style="left: 0">bbb</td>
<td class="fixed" style="left: 50px">bbb2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tbody>
</table>
</div>
</div>あなたがWebdevelopper地獄にいて、これをIE6のために機能させる必要があるならば、これは私が使ったサンプルコードです：
<html>
<head>
<style type="text/css">
.fixme {
position: relative;
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
</table>
</body>
</html>
これはおそらくIE6の場合にのみ機能するので、CSSには条件付きコメントを使用してください。
Eamon Nerbonne、私はあなたのコードのいくつかのcssを変更しました、そしてそれは今より良いです（スクロールバーは最初の行から始まります）
2行追加します。
.div : padding-left:5em;
.headcol : background-color : #fff;
プラグインを追加する必要はありません、CSSはこの仕事をすることができます！
これは、各列の最初のセルすべての位置を絶対位置にし、幅を固定にするという考え方です。例：
max-width: 125px;
min-width: 125px;
position: absolute;
これは最初の列の下のいくつかの列の一部を隠すので、最初の列と同じ幅の空の2番目の列を追加します（add second empty td）。
私はテストしましたが、これはChromeとFirefoxで動きます。
これは最も人気のある答えの別の変更ですが、最初の列ラベルのテキストの可変長の取り扱いを伴います。 http://jsfiddle.net/ozx56n41/
基本的に、私は前述のように行の高さを作成するために2列目を使用しています。しかし、私のフィドルは実際には上で述べたものとは違って機能します。
HTML：
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol"><div>This is a long label</div></td>
<td class="hiddenheadcol"><div>This is a long label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol"><div>Short label</div></td>
<td class="hiddenheadcol"><div>Short label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>
</div>
CSS：
body {
font: 16px Calibri;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
border-top: 1px solid grey;
}
#innerdiv {
overflow-x: scroll;
margin-left: 100px;
overflow-y: visible;
padding-bottom: 1px;
}
table {
border-collapse:separate;
}
td {
margin: 0;
border: 1px solid grey;
border-top-width: 0;
border-left-width: 0px;
padding: 10px;
}
td.headcol {
/* Frozen 1st column */
position: absolute;
left: 0;
top: auto;
border-bottom-width: 1px;
padding: 0;
border-left-width: 1px;
}
td.hiddenheadcol {
/* Hidden 2nd column to create height */
max-width: 0;
visibility: hidden;
padding: 0;
}
td.headcol div {
/* Text container in the 1st column */
width: 100px;
max-width: 100px;
background: lightblue;
padding: 10px;
box-sizing: border-box;
}
td.hiddenheadcol div {
/* Text container in the 2nd column */
width: 100px;
max-width: 100px;
background: red;
padding: 10px;
}
td.long {
background:yellow;
letter-spacing:1em;
}
私のMacでそれらをテストしたとき、Operaは以前のすべての答えに対してバグがありました。テーブルをスクロールすると、最初の固定されていない列を通過した後に固定列が消えます。私は先に行き、以下のコードを書きました。ローカルにインストールしたすべてのブラウザで動作します。私はどうやってそれを処理するのか分からない。
他のテーブルではなく1つのテーブルの行をスキップする場合や、行の高さを変更する場合は、このコードを調整する必要があるかもしれません。
<table class = "fixedColumns">
<tr><td> row 1 </td></tr>
<tr><td> row 2 </td></tr>
</table>
<table class = "scrollableTable">
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
</table>
<style type = "text/css" >
.fixedColumns
{
vertical-align:top;
display: inline-block;
}
.scrollableTable
{
display: inline-block;
width:50px;
white-space: nowrap;
overflow-x: scroll;
}
</style>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "400px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 3
}
} );
} );<head>
<title>table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<style>
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 900px;
margin: 0 auto;
}
</style>
</head><table id="example" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
<td>4804</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Herrod</td>
<td>Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
<td>9608</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonya</td>
<td>Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
<td>1667</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jena</td>
<td>Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
<td>3814</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sakura</td>
<td>Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
<td>9383</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Thor</td>
<td>Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
<td>8327</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Finn</td>
<td>Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
<td>2927</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Serge</td>
<td>Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
<td>8352</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zenaida</td>
<td>Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
<td>7439</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zorita</td>
<td>Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
<td>4389</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
<td>3431</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cara</td>
<td>Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
<td>3990</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Hermione</td>
<td>Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
<td>1016</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lael</td>
<td>Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
<td>6733</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
<td>8196</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Shad</td>
<td>Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
<td>6373</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<td>5384</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<td>4226</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>これはdatatablesの助けを借りて簡単に行うことができます。データテーブルに不慣れな人は、 https://datatables.net/ を参照してください。プラグインで多くの機能を提供します。与えられたコード、ヘッダーは固定されていて、最初の3つの列は固定されていて、他のいくつかの機能もあります。
あるいは、tbodyを（例えばheight:20emを介して）所定のサイズにスタイルしてoverflow-y:scroll;を使用する
それから、あなたは巨大なtbodyを持つことができ、それはページの他の部分から独立してスクロールするでしょう。
私はこの質問に対するすべての答えをチェックしませんでした、しかしそれらのほとんどを分析した後、私はデザインがセルまたは頭の中の複数行のデータの場合に失敗することがわかりました。これを解決するためにJavascriptを使用しました。誰かがこれが参考になることを願っています。
https://codepen.io/kushagrarora/pen/zeYaoY
var freezeTables = document.getElementsByClassName("freeze-pane");
[].forEach.call(freezeTables, ftable => {
var wrapper = document.createElement("div");
wrapper.className = "freeze-pane-wrapper";
var scroll = document.createElement("div");
scroll.className = "freeze-pane-scroll";
wrapper.appendChild(scroll);
ftable.parentNode.replaceChild(wrapper, ftable);
scroll.appendChild(ftable);
var heads = ftable.querySelectorAll("th:first-child");
let maxWidth = 0;
[].forEach.call(heads, head => {
var w = window
.getComputedStyle(head)
.getPropertyValue("width")
.split("px")[0];
if (Number(w) > Number(maxWidth)) maxWidth = w;
});
ftable.parentElement.style.marginLeft = maxWidth + "px";
ftable.parentElement.style.width = "calc(100% - " + maxWidth + "px)";
[].forEach.call(heads, head => {
head.style.width = maxWidth + "px";
var restRowHeight = window
.getComputedStyle(head.nextElementSibling)
.getPropertyValue("height");
var headHeight = window.getComputedStyle(head).getPropertyValue("height");
if (headHeight > restRowHeight)
head.nextElementSibling.style.height = headHeight;
else head.style.height = restRowHeight;
});
});@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
font-family: "Open Sans", sans-serif;
}
.container {
width: 400px;
height: 90vh;
border: 1px solid black;
overflow: hidden;
}
table,
th,
td {
border: 1px solid #eee;
}
.table {
width: 100%;
margin-bottom: 1rem;
table-layout: fixed;
border-collapse: collapse;
}
.freeze-pane-wrapper {
position: relative;
}
.freeze-pane-scroll {
overflow-x: scroll;
overflow-y: visible;
}
.freeze-pane th:first-child {
position: absolute;
background-color: pink;
left: 0;
top: auto;
max-width: 40%;
}<div class="container">
<table class="freeze-pane">
<tbody>
<tr>
<th>
<p>Model</p>
</th>
<th>
<p>Mercedes Benz AMG C43 4dr</p>
</th>
<th>
<p>Audi S4 Premium 4dr</p>
</th>
<th>
<p>BMW 440i 4dr sedan</p>
</th>
</tr>
<tr>
<th>
<p>Passenger capacity</p>
</th>
<td>
<p>5</p>
</td>
<td>
<p>5</p>
</td>
<td>
<p>5</p>
</td>
</tr>
<tr>
<th>
<p>Front (Head/Shoulder/Leg) (In.)</p>
</th>
<td>
<p>37.1/55.3/41.7</p>
</td>
<td>
<p>38.9/55.9/41.3</p>
</td>
<td>
<p>39.9/54.8/42.2</p>
</td>
</tr>
<tr>
<th>
<p>Second (Head/Shoulder/Leg) (In.)</p>
</th>
<td>
<p>37.1/55.5/35.2</p>
</td>
<td>
<p>37.4/54.5/35.7</p>
</td>
<td>
<p>36.9/54.3/33.7</p>
</td>
</tr>
</tbody>
</table>
</div>注： "container" divは、コードがモバイルビューと互換性があることを示すためだけのものです。
//If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute
table tbody {
position: relative;
}
table thead {
position: relative;
}
//Make both the first header and first data cells (First column) absolute so that it sticks to the left
table td:first-of-type {
position: absolute;
}
table th:first-of-type {
position: absolute;
}
//Move Second column according to the width of column 1
table td:nth-of-type(2) {
padding-left: <Width of column 1>;
}
table th:nth-of-type(2) {
padding-left: <Width of column 1>;
}
私にとって、これは完璧に機能した唯一のものでした（Paul O'Brienに感謝します！）： https://codepen.io/paulobrien/pen/gWoVzN
スニペットは次のとおりです。
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
}); .table-scroll {
position:relative;
max-width:600px;
margin:auto;
overflow:hidden;
border:1px solid #000;
}
.table-wrap {
width:100%;
overflow:auto;
}
.table-scroll table {
width:100%;
margin:auto;
border-collapse:separate;
border-spacing:0;
}
.table-scroll th, .table-scroll td {
padding:5px 10px;
border:1px solid #000;
background:#fff;
white-space:nowrap;
vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
background:#f9f9f9;
}
.clone {
position:absolute;
top:0;
left:0;
pointer-events:none;
}
.clone th, .clone td {
visibility:hidden
}
.clone td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
color:red;
}
.clone .fixed-side {
border:1px solid #000;
background:#eee;
visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
<th scope="col">Header 6</th>
<th scope="col">Header 7</th>
<th scope="col">Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content<br>
test</td>
<td><a href="#">Cell content longer</a></td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="fixed-side"> </th>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
<td>Footer 8</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>テーブルの右端の粘着性のある列を粘着性のものにしました。
th:last-of-type {
position: sticky;
right: 0;
width: 120px;
background: #f7f7f7;
}
td:last-of-type {
position: sticky;
right: 0;
background: #f7f7f7;
width: 120px;
}
{position: sticky; left: 0;}を実行すると、目的の結果が得られると思います。
2017年以降にリリースされたほとんどのブラウザの場合：
position: stickyを使用できます。 https://caniuse.com/#feat=css-sticky を参照してください。
固定幅の列は必要ありません。
以下のコードスニペットを実行して、動作を確認します。
.tscroll {
width: 400px;
overflow-x: scroll;
margin-bottom: 10px;
border: solid black 1px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #ddd;
}
.tscroll td, .tscroll th {
border-bottom: dashed #888 1px;
}<html>
<div class="tscroll">
<table>
<thead>
<tr>
<th></th>
<th colspan="5">Heading 1</th>
<th colspan="8">Heading 2</th>
<th colspan="4">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>10:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>11:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>12:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>13:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>14:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>15:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>16:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>17:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
</tbody>
</table>
</div>現在のテーブルにあまり触れたくない場合は、テーブルの前に偽の固定列を作成できます。
この例は、JSなしでそれを行う1つの方法を示しています
HTML
<div class="flex">
<div class="labels">
<span class="label">Label 1</span>
<span class="label">Lorem ipsum dolor sit amet.</span>
<span class="label">Lorem ipsum dolor.</span>
</div>
<div class="overflow">
<table>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
</table>
</div>
</div>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
min-width: 600px;
}
.labels {
display:flex;
flex-direction: column
}
.overflow {
overflow-x: scroll;
min width: 400px;
flex: 1;
}
.label {
display: flex;
align-items: center;
white-space:nowrap;
padding: 10px;
flex: 1;
border-bottom: 1px solid #ddd;
border-right: 2px solid #ddd;
}
.label:last-of-type {
overflow-x: scroll;
border-bottom: 0;
}
td {
border: 1px solid #ddd;
padding: 10px;
}
.flex {
display:flex;
max-width: 600px;
padding: 0;
border: 5px solid #ddd;
}