javascript-table出现滚动条表格自动对齐

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

javascript-table出现滚动条表格自动对齐的更多相关文章

JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创来自:蓝色理想第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
JavaScript for循环实现表格隔行变色
本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...
【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...
Table显示滚动条
Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...
html里的table如何在表格内部保留表格横线的同时去掉表格里的竖线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
如何让Table显示滚动条
Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...
HTML如何给table添加滚动条
HTML如何给table添加滚动条要给table添加滚动条其实很简单,主要是给table放到一个div里去,然后再设置div显示滚动条即可.示例代码如下所示: <!--div比table大小要 ...
ASP如何将table导出EXCEL表格
网页导出excel表格非常常用,对于一些加载<table>的数据网页,经常会用到这种功能,下面和大家分享一下ASP如何导出EXCEL表格工具/原料 ASP编辑器方法/步骤 ...

随机推荐

Hasura GraphQL schema 生成是如何工作的
不像大部分的graphql 引擎,使用标准的graphql 规范的处理模型,Hasura graphql 不存在resolver 的概念(实际上是有的,只是转换为了sql语法) 以下是Hasura g ...
ReportViewer的使用总结
1.换行符:chr(13)&chr(10) 2.时间字符串格式化: =IIF(Trim(Fields!business_time.Value).Length=6, Left(Trim(F ...
【HI3520DV200】sample
1.vdec不支持1280x720,支持640x480及以下
gaea-basic-components 知识点
github:https://github.com/ascoders/gaea-basic-components
ionic popup 做法及样式修改
ionic popup的做法很简单,一共有三种:show.confirm和alert,官网上讲得很详细. 一.confirm: js:var confirmPopup = $ionicPopup.co ...
Word中选择中内容后变成C，VMware 虚拟中Ctrl键一直被按住了
Word中选择中内容后变成C: 解决办法:关闭金山词霸的[划词翻译]功能即可. VMware 虚拟中Ctrl键一直被按住了: 解决办法:关闭金山词霸的[取词翻译]功能即可.
ThinkPHP 3.1.2 CURD特性 -3
一.ThinkPHP 3 的CURD介绍 (了解) 二.ThinkPHP 3 读取数据 (重点) 对数据的读取 Read $m=new Model('User'); $m=M('User'); ...
在MacOSX系统上的一些工具和问题汇总
Android 模拟器 1. 安装模拟器点击链接:https://cloud.genymotion.com/page/launchpad/download 需要先注册登录一下. 2.安装Virtua ...
PCM简介
1. 差分脉冲编码调制如果两个相邻抽样值之间的相关性很大,那么它们的差值就较小,这样,仅对差值量化可以使用较少的比特数,此即差分PCM,或DPCM. 为了理论方便,我们将采样和量化分开,并用不带上三 ...
spring 事务的配置学习
1.spring事务管理器接口PlatformTransactionManager 接口中的方法获取事务状态信息 -TransactionStatus getTransaction(Transact ...

javascript-table出现滚动条表格自动对齐

javascript-table出现滚动条表格自动对齐的更多相关文章

随机推荐

热门专题