1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>table</title>
6 </head>
7 <style>
8 *{margin:0;padding:0}
9 html,body{
10 height: 100%;
11 }
12 .table-container{
13 width: 100%;
14 height: 100%;
15 }
16 table{
17 width: 100%;
18 border-collapse: collapse;
19 }
20 tr{
21 width: 100%;
22 }
23 th,td{
24 width: 25%;
25 padding: 10px 0;
26 }
27 .scrollbox{
28 overflow: auto;
29 }
30 </style>
31 <body>
32 <div class="table-container lay-this">
33 <table border="1">
34 <thead>
35 <tr>
36 <th class="a">头部1</th>
37 <th class="b">头部1</th>
38 <th class="c">头部1</th>
39 <th class="d">头部1</th>
40 </tr>
41 </thead>
42 </table>
43
44 <div class="scrollbox">
45 <table border="1" >
46 <tbody>
47 <tr>
48 <td class="one">1</td>
49 <td class="two">1</td>
50 <td class="three">1</td>
51 <td class="four">1</td>
52 </tr>
53 <tr>
54 <td class="one">1</td>
55 <td class="two">1</td>
56 <td class="three">1</td>
57 <td class="four">1</td>
58 </tr>
59 <tr>
60 <td class="one">1</td>
61 <td class="two">1</td>
62 <td class="three">1</td>
63 <td class="four">1</td>
64 </tr>
65 <tr>
66 <td class="one">1</td>
67 <td class="two">1</td>
68 <td class="three">1</td>
69 <td class="four">1</td>
70 </tr>
71 <tr>
72 <td class="one">1</td>
73 <td class="two">1</td>
74 <td class="three">1</td>
75 <td class="four">1</td>
76 </tr>
77 <tr>
78 <td class="one">1</td>
79 <td class="two">1</td>
80 <td class="three">1</td>
81 <td class="four">1</td>
82 </tr>
83 <tr>
84 <td class="one">1</td>
85 <td class="two">1</td>
86 <td class="three">1</td>
87 <td class="four">1</td>
88 </tr>
89 <tr>
90 <td class="one">1</td>
91 <td class="two">1</td>
92 <td class="three">1</td>
93 <td class="four">1</td>
94 </tr>
95 <tr>
96 <td class="one">1</td>
97 <td class="two">1</td>
98 <td class="three">1</td>
99 <td class="four">1</td>
100 </tr>
101 <tr>
102 <td class="one">1</td>
103 <td class="two">1</td>
104 <td class="three">1</td>
105 <td class="four">1</td>
106 </tr>
107 </tbody>
108 </table>
109 </div>
110 </div>
111 </body>
112 <script>
113 var layThisA=document.querySelector('.lay-this .a');
114 var layThisB=document.querySelector('.lay-this .b');
115 var layThisC=document.querySelector('.lay-this .c');
116 var layThisD=document.querySelector('.lay-this .d');
117 var layThisE=document.querySelector('.lay-this .e');
118
119 var layThisE=document.querySelector('.lay-this .scrollbox');
120
121 var one=document.querySelector('.lay-this .one');
122 var two=document.querySelector('.lay-this .two');
123 var three=document.querySelector('.lay-this .three');
124 var four=document.querySelector('.lay-this .four');
125
126
127 function getStyle(obj,attr){
128 if(obj.currentStyle){
129 return obj.currentStyle[attr];
130 }
131 else{
132 return getComputedStyle(obj,false)[attr];
133 }
134 }
135 autoAlign();
136 window.onload=function(){
137 autoAlign();
138 }
139 window.onresize=function(){
140 autoAlign();
141 }
142 console.log(isScroll(layThisE).scrollY)
143 //表格居中
144 function autoAlign(){
145 if(isScroll(layThisE).scrollY){
146 layThisA.style.width=getStyle(one,'width');
147 layThisB.style.width=getStyle(two,'width');
148 layThisC.style.width=getStyle(three,'width');
149 layThisD.style.width=parseInt(getStyle(four,'width'))+15+'px';
150 layThisE.style.height=parseInt(document.documentElement.clientHeight)-200+'px';
151 }else{
152 layThisA.style.width=getStyle(one,'width');
153 layThisB.style.width=getStyle(two,'width');
154 layThisC.style.width=getStyle(three,'width');
155 layThisD.style.width=getStyle(four,'width');
156 layThisE.style.height=parseInt(document.documentElement.clientHeight)-200+'px';
157 }
158 }
159
160 //元素身上是否出现了滚动条
161 function isScroll(el) {
162 // test targets
163 var elems = el ? [el] : [document.documentElement, document.body];
164 var scrollX = false, scrollY = false;
165 for (var i = 0; i < elems.length; i++) {
166 var o = elems[i];
167 // test horizontal
168 var sl = o.scrollLeft;
169 o.scrollLeft += (sl > 0) ? -1 : 1;
170 o.scrollLeft !== sl && (scrollX = scrollX || true);
171 o.scrollLeft = sl;
172 // test vertical
173 var st = o.scrollTop;
174 o.scrollTop += (st > 0) ? -1 : 1;
175 o.scrollTop !== st && (scrollY = scrollY || true);
176 o.scrollTop = st;
177 }
178 // ret
179 return {scrollX: scrollX,scrollY: scrollY};
180 }
181 </script>
182 </html>
1 // function isIE() { //ie?
2 // if (!!window.ActiveXObject || "ActiveXObject" in window)
3 // return true;
4 // else
5 // return false;
6 // }
7 // console.log(isIE())
