0
고정 헤더가있는 테이블을 만들려고하는데 열을 크기를 조정할 수 있어야합니다.HTML의 고정 헤더가있는 크기 조정이 가능한 열 테이블
하지만 크기를 조정할 때마다 정확히 정확하게 정렬되지 않습니다. 그것은 크롬에서 더 많이 깨집니다. 시도 열 크기를 조정할 때
하지만 - -
Reffered은 - 페이지로드에 Resizable columns tables with fixed header
- 은
따라와 내 페이지입니다
<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script>
<!--
<link href="http://www.bacubacu.com/colresizable/css/main.css" rel="stylesheet" /> -->
<style>
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
table-layout: fixed;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif !important;
}
td{
overflow:hidden;
text-overflow: ellipsis;border:1px solid #ddd;
}
tr:hover {
background-color: rgba(176, 225, 250, 0.48) !important;
}
th {
white-space: nowrap !important;border:1px solid #ddd;
}
td {
white-space: nowrap !important;
}
.c1{
width: 10%;
}
.c2,.c3{
width: 18%;
}
.c4,.c5,.c6{
width: 18%;
}
#c1{
width: 10%;
}
#c2,#c3{
width: 18%;
}
#c4,#c5,#c6{
width: 18%;
}
</style>
<script>
$(document).ready(function(){
$('#tableHeader').colResizable({
fixed:false,
liveDrag: true,
onDrag: resFun
});
/*
$('.c1').width('20%');
$('.c2').width('40%');
$('.c3').width('40%');
*/
function resFun() {
var c1 = $('#c1').width();
var c2 = $('#c2').width();
var c3 = $('#c3').width();
var c4 = $('#c4').width();
var c5 = $('#c5').width();
var c6 = $('#c6').width();
$('.c1').width(c1);
$('.c2').width(c2);
$('.c3').width(c3);
$('.c4').width(c4);
$('.c5').width(c5);
$('.c6').width(c6);
};
resFun();
});
</script>
<div style="width:70%">
<div style="height: 39px;">
<table class="" id="tableHeader" style="width: 100%; height: 39px;" cellpadding="3" cellspacing="0">
<tr>
<th id="c1">first</th>
<th id="c2">second</th>
<th id="c3">third</th>
<th id="c4">Fourth</th>
<th id="c5">Fifth</th>
<th id="c6">Sixth</th>
</tr>
</table>
</div>
<div style="overflow: auto; height: 200px;" cellpadding="3" cellspacing="0">
<table class="" id="table">
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
<td class="c4">col 1</td>
<td class="c5">col 2</td>
<td class="c6">col 3</td>
</tr>
</table>
</div>
</div>
</html>