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