Below is the HTML, CSS and Javasript that accomplished the fixed row and column.
<html lang="en">
<head>
<script src="js/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
function on_y_scroll(e) {
var t = $('.tb_cells').scrollTop();
var l = $('.tb_cells').scrollLeft();
$('.r_headers').scrollTop(t);
$('.c_headers').scrollLeft(l);
console.log('left=' + l.toString() + ',top=' + t.toString());
}
$(document).ready(function () {
$('.tb_cells').scroll(on_y_scroll);
});
</script>
<style>
.tb {
background-color: darkgray;
width: 600px;
height: 250px;
}
/* the full row and partial should be hidden */
.max_row_width {
width: 500px;
}
/* the data row to be partially display on the screen*/
.max_data_width {
width: 420px;
}
/* the data row height */
.row_height {
height: 30px;
}
/* the column header height */
.row0_height{
height:40px;
}
/* for column zero*/
.cell0 {
width: 100px;
background-color: red;
}
.tb_col0 {
float: left;
}
.r_headers {
height: 140px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
overflow: hidden;
}
.row_header {
background-color: #0094ff;
}
/* for row zero */
.c_headers {
width: 400px;
overflow: hidden;
}
.col_header {
width: 100px;
float: left;
background-color: green;
color: white;
}
.tb_row0 {
clear: both;
}
/* for data cell */
.tb_data {
float: left;
height: 200px;
overflow: hidden;
overflow-x: hidden;
background-color: yellow;
}
.tb_cells {
float: left;
height: 160px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
overflow: hidden;
overflow-y: auto;
overflow-x: auto;
background-color: mediumaquamarine;
}
.tb_row {
clear: both;
}
.cell_col {
width: 100px;
float: left;
/* user defined style for the cell content */
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<h3>Fixed row and column</h3>
<div class="tb">
<div class="tb_col0">
<!--the first cell-->
<div class="cell0 row0_height">
cell 0
</div>
<!--the first column-->
<div class="r_headers">
<div class="row_header row_height">
r 1
</div>
<div class="row_header row_height">
r 2
</div>
<div class="row_header row_height">
r 3
</div>
<div class="row_header row_height">
r 4
</div>
<div class="row_header row_height">
r 5
</div>
<div class="row_header row_height">
r 6
</div>
<div class="row_header row_height">
r 7
</div>
</div>
</div>
<div class="tb_data max_data_width">
<!--the column header -->
<div class="c_headers row0_height">
<div class="tb_row0 max_row_width row0_height">
<div class="col_header row0_height">
col 1
</div>
<div class="col_header row0_height">
col 2
</div>
<div class="col_header row0_height">
col 3
</div>
<div class="col_header row0_height">
col 4
</div>
<div class="col_header row0_height">
col 5
</div>
</div>
</div>
<!-- data cells -->
<div class="tb_cells max_data_width">
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell11 very long long long text
</div>
<div class="cell_col">
cell21
</div>
<div class="cell_col">
cell31
</div>
<div class="cell_col">
cell41
</div>
<div class="cell_col">
cell51
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell12
</div>
<div class="cell_col">
cell22
</div>
<div class="cell_col">
cell32
</div>
<div class="cell_col">
cell42
</div>
<div class="cell_col">
cell52
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell13
</div>
<div class="cell_col">
cell23
</div>
<div class="cell_col">
cell33
</div>
<div class="cell_col">
cell43
</div>
<div class="cell_col">
cell53
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell14
</div>
<div class="cell_col">
cell24
</div>
<div class="cell_col">
cell34
</div>
<div class="cell_col">
cell44
</div>
<div class="cell_col">
cell54
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell15
</div>
<div class="cell_col">
cell25
</div>
<div class="cell_col">
cell35
</div>
<div class="cell_col">
cell45
</div>
<div class="cell_col">
cell55
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell16
</div>
<div class="cell_col">
cell26
</div>
<div class="cell_col">
cell36
</div>
<div class="cell_col">
cell46
</div>
<div class="cell_col">
cell56
</div>
</div>
<div class="tb_row max_row_width row_height">
<div class="cell_col">
cell17
</div>
<div class="cell_col">
cell27
</div>
<div class="cell_col">
cell37
</div>
<div class="cell_col">
cell47
</div>
<div class="cell_col">
cell57
</div>
</div>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment