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编辑器 方法/步骤 ...
随机推荐
- lamp安装总结
1.安装准备 建一个目录用于存放各软件包的压缩文件, 如我把我的源码文件都放在了 /software目录下 切换到/software目录下,执行 wget http://dev.mysql.com ...
- JS正则表达式验证身份证号码
function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{1 ...
- 通过阅读python subprocess源码尝试实现非阻塞读取stdout以及非阻塞wait
http://blog.chinaunix.net/uid-23504396-id-4661783.html 执行subprocess的时候,执行不是问题最麻烦的是获取进程执行后的回显来确认是否正确执 ...
- VS2010生成安装包制作步骤 （转）
阅读目录 VS2010生成安装包制作步骤 回到目录 VS2010生成安装包制作步骤 在VS2010中文旗舰版本中生成winForm安装包,可以复制你电脑中的开发环境,避免你忘记了一下配置然后在别的 ...
- java 同步代码块与同步方法
同步代码块 synchronized (obj) { // 代码块 } obj 为同步监视器,以上代码的含义为:线程开始执行同步代码块(中的代码)之前,必须先获得对同步监视器的锁定. 代码块中的代码是 ...
- jsp-提交表单时，select的值无法传递
属性为"disabled",提交表单时,select的值无法传递,移除disabled属性,<input name="id" type="tex ...
- 修改ORA-28001 口令已经失效问题
Oracle默认密码的有效时间为180天,当超过180天时,将出现如下错误 解决方法: 使用Oracle SQL Developer登录Oralce, 以as sysdba登录 登录后,执行 sele ...
- Pullword 分词工具
def get_response(self, txt): """ 热词工具 """ datas = [] request_lists = [ ...
- Hanlp中使用纯JAVA实现CRF分词
Hanlp中使用纯JAVA实现CRF分词 与基于隐马尔可夫模型的最短路径分词.N-最短路径分词相比,基于条件随机场(CRF)的分词对未登录词有更好的支持.本文(HanLP)使用纯Java实现CRF模型 ...
- Git-git rebase详解
git合并代码方式主要有两种方式,分别为:1.merge处理,这是大家比较能理解的方式.2.rebase处理,中文此处翻译为衍合过程. git rebase操作讲解例子: cd /usr/local/ ...