<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;
}
#t-title{
height:34px;
}
.rum-table {
border-collapse: collapse;
/*width: 100%;*/
overflow-x: scroll;
display: block;
padding-bottom:20px;
background-color:red;
}
.rum-table > thead {
background-color: #EFEFEF;
}
.rum-table > thead, .rum-table > tbody {
display: inline-block;
}
.rum-table > tbody {
overflow-y: scroll;
overflow-x: hidden;
}
.rum-table > tbody > tr {
height: 35px;
border-bottom: 1px solid #efefef;
}
.rum-table > tbody > tr > td, .rum-table > thead > tr > th {
padding:4px;
min-width: 70px;
border: solid 1px #efefef;
}
.tool-float{
position:relative;
float:right;
right:0px;
height:100%;
width:80px;
background-color: #cccccc;
}
.tool-float ul{
list-style: none;
padding-left:0px;
}
.tool-float ul > li{
white-space: nowrap;
width: 1%;
}
</style>
</head>
<body>
<div id="lordly">
<div id="leftCol">left</div>
<div id="contentCol">
<div id="t-title">title</div>
<table class="rum-table">
<thead>
<tr>
<th width="*">
제목1
</th>
<th width="*">
제목2
</th>
<th width="*">
제목3
</th>
<th width="*">
제목4
</th>
<th width="*">
제목5
</th>
<th width="*">
제목6
</th>
<th width="*">
제목7
</th>
<th width="*">
제목8
</th>
<th width="*">
제목9
</th>
<th width="*">
제목10
</th>
<th width="*">
제목11
</th>
<th width="*">
제목12
</th>
<th width="*">
제목13
</th>
<th width="*">
제목14
</th>
<th width="*">
제목15
</th>
<th width="*">
제목16
</th>
</tr>
</thead>
<tbody>
<tr>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript">
$(function(){
$('.rum-table tbody').css('height', $(window).height() - 80 );
$(window).resize(function() {
$('.rum-talbe tbody').css('height', $(window).height() - 80 );
});
$('.rum-table').on('scroll', function () {
console.log($("table").scrollLeft());
//$(".rum-table").scrollTop()
$(".rum-table > *").width($(".rum-table").width() + $(".rum-table").scrollLeft());
});
});
</script>
<div id="cleared"></div>
</div>
댓글 없음:
댓글 쓰기