Kepler-186f: 12월 2016

2016년 12월 13일 화요일

fixed head table2

<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>

2016년 12월 11일 일요일

table header fix + tbody scroll

<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>

피드 구독하기: 글 (Atom)