<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<style>
*{margin:0;padding:0}
html,body{
height: 100%;
}
.table-container{
width: 100%;
height: 100%;
}
table{
width: 100%;
border-collapse: collapse;
}
tr{
width: 100%;
}
th,td{
width: 25%;
padding: 10px 0;
}
.scrollbox{
overflow: auto;
}
</style>
<body>
<div class="table-container lay-this">
<table border="1">
<thead>
<tr>
<th class="a">头部1</th>
<th class="b">头部1</th>
<th class="c">头部1</th>
<th class="d">头部1</th>
</tr>
</thead>
</table>
<div class="scrollbox">
<table border="1" >
<tbody>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
<tr>
<td class="one">1</td>
<td class="two">1</td>
<td class="three">1</td>
<td class="four">1</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var layThisA=document.querySelector('.lay-this .a');
var layThisB=document.querySelector('.lay-this .b');
var layThisC=document.querySelector('.lay-this .c');
var layThisD=document.querySelector('.lay-this .d');
var layThisE=document.querySelector('.lay-this .e');
var layThisE=document.querySelector('.lay-this .scrollbox');
var one=document.querySelector('.lay-this .one');
var two=document.querySelector('.lay-this .two');
var three=document.querySelector('.lay-this .three');
var four=document.querySelector('.lay-this .four');
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
autoAlign();
window.onload=function(){
autoAlign();
}
window.onresize=function(){
autoAlign();
}
console.log(isScroll(layThisE).scrollY)
//表格居中
function autoAlign(){
if(isScroll(layThisE).scrollY){
layThisA.style.width=getStyle(one,'width');
layThisB.style.width=getStyle(two,'width');
layThisC.style.width=getStyle(three,'width');
layThisD.style.width=parseInt(getStyle(four,'width'))+15+'px';
layThisE.style.height=parseInt(document.documentElement.clientHeight)-200+'px';
}else{
layThisA.style.width=getStyle(one,'width');
layThisB.style.width=getStyle(two,'width');
layThisC.style.width=getStyle(three,'width');
layThisD.style.width=getStyle(four,'width');
layThisE.style.height=parseInt(document.documentElement.clientHeight)-200+'px';
}
}
//元素身上是否出现了滚动条
function isScroll(el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body];
var scrollX = false, scrollY = false;
for (var i = 0; i < elems.length; i++) {
var o = elems[i];
// test horizontal
var sl = o.scrollLeft;
o.scrollLeft += (sl > 0) ? -1 : 1;
o.scrollLeft !== sl && (scrollX = scrollX || true);
o.scrollLeft = sl;
// test vertical
var st = o.scrollTop;
o.scrollTop += (st > 0) ? -1 : 1;
o.scrollTop !== st && (scrollY = scrollY || true);
o.scrollTop = st;
}
// ret
return {scrollX: scrollX,scrollY: scrollY};
}
</script>
</html>
// function isIE() { //ie?
// if (!!window.ActiveXObject || "ActiveXObject" in window)
// return true;
// else
// return false;
// }
// console.log(isIE())
