jQuery3で、左中右3テーブルの行の高さを合わせ、ヘッダー・フッターを固定と左右列を固定にします。
【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
『jQuery Mouse Wheel Pluginのダウンロード方法』の手順で、『jquery.mousewheel.min.js』をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script>
$(function(){
var container = $('#container');
adjustContainerDiv(container);
adjustTable(container);
adjustTableDiv(container);
attachMouseWheel(container);
});
function adjustContainerDiv(target){
var windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);
var scrollHeight = windowHeight - target.offset().top;
if (target.height() > scrollHeight) {
target.height(scrollHeight);
}
var allTable = target.children('table');
var headDiv1 = allTable.find('.headDiv1');
var headDiv2 = allTable.find('.headDiv2');
var headDiv3 = allTable.find('.headDiv3');
var windowWidth = (window.innerWidth || document.documentElement.clientWidth || 0);
var scrollWidth = headDiv1.width() + headDiv2.width() + headDiv3.width();
if (target.width() > scrollWidth) {
target.width(scrollWidth);
} else {
target.width(windowWidth);
}
};
function adjustTable(target) {
var allTable = target.children('table');
var bodyTable1 = allTable.find('.bodyTable1');
var bodyTable2 = allTable.find('.bodyTable2');
var bodyTable3 = allTable.find('.bodyTable3');
var bodyTable1Rows = bodyTable1.children("tbody").children("tr");
var bodyTable2Rows = bodyTable2.children("tbody").children("tr");
var bodyTable3Rows = bodyTable3.children("tbody").children("tr");
for (var i = 0; i < bodyTable1Rows.length; i++ ) {
var heiestHeight = 0;
if (bodyTable1Rows.eq(i).height() < bodyTable2Rows.eq(i).height()) {
if (bodyTable2Rows.eq(i).height() < bodyTable3Rows.eq(i).height()) {
heiestHeight = bodyTable3Rows.eq(i).height();
} else {
heiestHeight = bodyTable2Rows.eq(i).height();
}
} else {
if (bodyTable1Rows.eq(i).height() < bodyTable3Rows.eq(i).height()) {
heiestHeight = bodyTable3Rows.eq(i).height();
} else {
heiestHeight = bodyTable1Rows.eq(i).height();
}
}
bodyTable1Rows.eq(i).height(heiestHeight);
bodyTable2Rows.eq(i).height(heiestHeight);
bodyTable3Rows.eq(i).height(heiestHeight);
}
};
function adjustTableDiv(target) {
var container = target;
var allTable = target.children('table');
var headDiv1 = allTable.find('.headDiv1');
var headDiv2 = allTable.find('.headDiv2');
var headDiv3 = allTable.find('.headDiv3');
var bodyDiv1 = allTable.find('.bodyDiv1');
var bodyDiv2 = allTable.find('.bodyDiv2');
var bodyDiv3 = allTable.find('.bodyDiv3');
var footDiv1 = allTable.find('.footDiv1');
var footDiv2 = allTable.find('.footDiv2');
var footDiv3 = allTable.find('.footDiv3');
var bodyHeight = container.height() - (headDiv2.height() + footDiv2.height());
bodyDiv1.height(bodyHeight);
bodyDiv2.height(bodyHeight);
bodyDiv3.height(bodyHeight);
var bodyWidth = container.width() - (bodyDiv1.width() + bodyDiv3.width());
headDiv2.width(bodyWidth);
bodyDiv2.width(bodyWidth);
footDiv2.width(bodyWidth);
bodyDiv3.scroll(function() {
bodyDiv1.scrollTop(bodyDiv3.scrollTop());
bodyDiv2.scrollTop(bodyDiv3.scrollTop());
});
footDiv2.scroll(function() {
headDiv2.scrollLeft(footDiv2.scrollLeft());
bodyDiv2.scrollLeft(footDiv2.scrollLeft());
});
}
function attachMouseWheel(target) {
var allTable = target.children('table');
var bodyDiv3 = allTable.find('.bodyDiv3');
target.mousewheel(function(event) {
if ($(event.target).closest(bodyDiv3).length > 0) {
return;
}
var position = bodyDiv3.scrollTop() - event.deltaY * event.deltaFactor;
bodyDiv3.scrollTop(position);
});
}
</script>
</head>
<body style="margin: 0 0;">
タイトル<br />
<div id="container" style="background-color: burlywood;">
<table style="border-collapse: collapse;">
<thead>
<tr>
<td valign="top" style="padding: 0px;">
<div class="headDiv1" style="overflow: hidden; background-color: hotpink;">
<table border="1" class="headTable1">
<thead>
<tr>
<th><div style="width: 50px;">番号</div></th>
<th><div style="width: 100px;">名前</div></th>
</tr>
</thead>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="headDiv2" style="overflow: hidden; background-color: cornflowerblue;">
<table border="1" class="headTable2">
<thead>
<tr>
<th><div style="width: 100px;">項目１</div></th>
<th><div style="width: 100px;">項目２</div></th>
<th><div style="width: 100px;">項目３</div></th>
<th><div style="width: 100px;">項目４</div></th>
<th><div style="width: 100px;">項目５</div></th>
</tr>
</thead>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="headDiv3" style="overflow: hidden; background-color: lightseagreen;">
<table border="1" class="headTable3">
<thead>
<tr>
<th><div style="width: 100px;">備考１</div></th>
<th><div style="width: 100px;">備考２</div></th>
</tr>
</thead>
</table>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" style="padding: 0px;">
<div class="bodyDiv1" style="overflow: hidden; background-color: pink;">
<table border="1" class="bodyTable1">
<tbody>
<tr>
<td><div style="width: 50px;">１</div></td>
<td><div style="width: 100px;">あああ<br />ああ</div></td>
</tr>
<tr>
<td>２</td>
<td>いいいいい</td>
</tr>
<tr>
<td>３</td>
<td>うう<br />ううう</td>
</tr>
<tr>
<td>４</td>
<td>ええ<br />えええ</td>
</tr>
<tr>
<td>５</td>
<td>おお<br />おおお</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="bodyDiv2" style="overflow: hidden; background-color: skyblue;">
<table border="1" class="bodyTable2">
<tbody>
<tr>
<td><div style="width: 100px;">項目１－１</div></td>
<td><div style="width: 100px;">項目２－１</div></td>
<td><div style="width: 100px;">項目３－１</div></td>
<td><div style="width: 100px;">項目４－１</div></td>
<td><div style="width: 100px;">項目５－１</div></td>
</tr>
<tr>
<td>項目１－２</td>
<td>項目<br />２－２</td>
<td>項目３－２</td>
<td>項目４－２</td>
<td>項目５－２</td>
</tr>
<tr>
<td>項目１－３</td>
<td>項目<br />２－<br />３</td>
<td>項目３－３</td>
<td>項目４－３</td>
<td>項目５－３</td>
</tr>
<tr>
<td>項目１－４</td>
<td>項目<br />２－<br />４</td>
<td>項目３－４</td>
<td>項目４－４</td>
<td>項目５－４</td>
</tr>
<tr>
<td>項目１－５</td>
<td>項目<br />２－<br />５</td>
<td>項目３－５</td>
<td>項目４－５</td>
<td>項目５－５</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="bodyDiv3" style="overflow-y: scroll; background-color: palegreen;">
<table border="1" class="bodyTable3">
<tbody>
<tr>
<td><div style="width: 100px;">備考１－１</div></td>
<td><div style="width: 100px;">備考２－１</div></td>
</tr>
<tr>
<td>備考１－２</td>
<td>備考２－２</td>
</tr>
<tr>
<td>備考１－３</td>
<td>備考２－３</td>
</tr>
<tr>
<td>備考１－４</td>
<td>備考２－４</td>
</tr>
<tr>
<td>備考１－５</td>
<td>備考<br />２<br />－<br />５</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0px;">
<div class="footDiv1" style="background-color: deeppink;">
<table border="1" class="footTable1">
<thead>
<tr>
<th><div style="width: 50px;">No</div></th>
<th><div style="width: 100px;">Name</div></th>
</tr>
</thead>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="footDiv2" style="overflow-x: scroll; background-color: dodgerblue;">
<table border="1" class="footTable2">
<thead>
<tr>
<th><div style="width: 100px;">Item1</div></th>
<th><div style="width: 100px;">Item2</div></th>
<th><div style="width: 100px;">Item3</div></th>
<th><div style="width: 100px;">Item4</div></th>
<th><div style="width: 100px;">Item5</div></th>
</tr>
</thead>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="footDiv3" style="background-color: limegreen;">
<table border="1" class="footTable3">
<thead>
<tr>
<th><div style="width: 100px;">Note1</div></th>
<th><div style="width: 100px;">Note2</div></th>
</tr>
</thead>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</div>
</html>
４．ダウンロードした『jquery-3.1.0.min.js』と『jquery.mousewheel.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
以上です。
