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编辑器 方法/步骤 ...
随机推荐
- css属性的继承性
不可继承属性: 盒子模型属性:width height padding border margin 背景相关属性:background相关(background-image background-si ...
- taro 微信小程序原生作用域获取
在 Taro 的页面和组件类中,this 指向的是 Taro页面或组件实例. 但是一般我们需要获取 Taro的页面和组件 所对应的 小程序原生页面和组件实例,这个时候我们可以通过 this.$scop ...
- beautifulSoup使用
- 逻辑回归原理（python代码实现）
Logistic Regression Classifier逻辑回归主要思想就是用最大似然概率方法构建出方程,为最大化方程,利用牛顿梯度上升求解方程参数. 优点:计算代价不高,易于理解和实现. 缺点: ...
- 修改postfix smtp端口，防止公网扫描浪费你的服务器流量
邮件服务器的默认发送邮件端口是25,一些ISP会封锁25端口防止垃圾邮件的发送,这样就导致不能使用Foxmail.outlook等邮件客户端发送邮件.修改默认smtp端口就可以解决这个问题.下面的方法 ...
- CentOS7安装部署zabbix3.4操作记录
CentOS7安装部署zabbix3.4操作记录 1.安装前准备 1.1 查看centos的系统版本 [root@zabbix ~]# cat /etc/redhat-release CentOS L ...
- ML: 聚类算法R包 - 模型聚类
模型聚类 mclust::Mclust RWeka::Cobweb mclust::Mclust EM算法也称为期望最大化算法,在是使用该算法聚类时,将数据集看作一个有隐形变量的概率模型,并实现模型最 ...
- Speeding Up The Traveling Salesman Using Dynamic Programming
Copied From:https://medium.com/basecs/speeding-up-the-traveling-salesman-using-dynamic-programming-b ...
- STM32 printf函数
/******************** (C) COPYRIGHT 2012 WildFire Team *************************** * 文件名 :usart1.c * ...
- 快速了解Python的定制类
多重继承 class Student(man,oldman): pass 可以继承多个父类,拥有他们的方法,如果有父类有相同的方法,哪个在前用哪个 定制类 看到类似__slots__这种形如 __xx ...