Skip to content

Instantly share code, notes, and snippets.

@YasuakiHirano

YasuakiHirano/scrollTable.html

Last active February 10, 2016 12:32
Show Gist options
  • Save YasuakiHirano/be9bc33e9b747666b605 to your computer and use it in GitHub Desktop.
Save YasuakiHirano/be9bc33e9b747666b605 to your computer and use it in GitHub Desktop.
Download ZIP
テーブルのデータ行のみスクロールさせる
Raw
scrollTable.html
<!--demo page http://160.16.97.177/codetest/scrollTable.html-->
<html>
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
sizeChange();
$( window ).resize(function(){
sizeChange();
});
function sizeChange(){
var width = $(window).width();
// テーブル全体のサイズ指定
var targetWidth = (width / 2) + 400;
// カラムのサイズ指定 全体－カラム数でよさそう
var colWidth = targetWidth / 4;
$("#scrollTable td").css("width", colWidth);
$("#scrollHeader .headCol").css("width", colWidth-8.5);
$("#rightCol").css("width", "15px");
$("#scrollTable").css("width", targetWidth);
$("#scrollHeader").css("width", targetWidth);
}
});
</script>
<style>
#scrollTable {
height:70px;
width:450px;
overflow-y:scroll;
overflow-x:hidden;
padding-left:3px;
}
#scrollTable td{
border:1px solid #000000;
width:100px;
height:30px;
}
#scrollHeader {
width:450px;
overflow-x:hidden;
overflow-y:hidden;
padding-left:3px;
}
#scrollHeader .headCol{
border:1px solid #000000;
width:100px;
margin-left:2px;
float:left;
text-align:center;
line-height:230%;
height:30px;
}
</style>
</head>
<body>
<div id="scrollHeader">
<div class="headCol">ヘッダA</div>
<div class="headCol">ヘッダB</div>
<div class="headCol">ヘッダC</div>
<div class="headCol">ヘッダD</div>
</div>
<div id="scrollTable">
<table>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment