<style>
html,
body {
font-family: 'Lato', sans-serif;
width: 100%;
height: 100%;
margin:0;
}
body
{
min-height: 100%;
overflow: hidden;
}
#lordly {
position:relative;
width: 100%;
height: 100%;
}
#leftCol{
position:absolute;
bottom:0;
width:200px;
height:100%;
background-color: #ffffff;
border-right: 1px solid #efefef;
}
#contentCol{
padding-left:210px;
padding-right:10px;
height:100%;
min-height: 100%;
background-color: #ffffff;
overflow-x: scroll;
}
.scroll {
width: 100%; /* Optional */
border-collapse: collapse;
border-spacing: 0;
border: 2px solid black;
overflow-x: scroll;
}
.scroll tbody,
.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
white-space: nowrap;
padding:10px;
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
/*table {
border-collapse: collapse;
width: 100%;
overflow-x: scroll;
display: block;
padding-bottom:20px;
}
thead {
background-color: #EFEFEF;
}
thead, tbody {
display: inline-block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
}
tr {
height: 25px;
border-bottom: 1px solid #efefef;
}
td, th {
padding:4px;
min-width: 70px;
border: solid 1px #efefef;
}*/
</style>
<script language="javascript">
$(function(){
$('tbody').css('height', $(window).height() - 80 );
// $(window).resize(function() {
// $('tbody').css('height', $(window).height() - 80 );
// });
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
console.log($("table > *"));
});
});
</script>
</head>
<body>
<div id="lordly">
<div id="leftCol">left</div>
<div id="contentCol">
<div id="t-title">title</div>
<table class="scroll">
<thead>
<tr>
<th>Head 1 yyyy </th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1 ---------------- </td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
<div id="cleared"></div>
</div>
</div>
<script language="javascript">
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize();
</script>
댓글 없음:
댓글 쓰기