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编辑器 方法/步骤 ...
随机推荐
- golang 版本 gearman 试用
g2 是golang 版的gearman 实现,包含了server (支持leveldb,以及metrics).client 代码.worker 代码 使用上还是很方便的,同时部署也比较简单,结合do ...
- DOS命令之at命令详解
AT命令是Windows XP中内置的命令,它也可以媲美Windows中的“计划任务”,而且在计划的安排.任务的管理.工作事务的处理方面,AT命令具有更强大更神通的功能.AT命令可在指定时间和日期.在 ...
- python之路---10 *args **kwargs 命名空间 作用域 函数的嵌套
二十八.函数进阶 1. "*" 和 "**" ① 在形参位置时 都是聚合的作用 *args 位置参数→元组 **kwargs 关键字参数→ ...
- MySQL 有用的查询语句
查看指定数据库 db_name 的字符集和排序规则 USE db_name; SELECT @@character_set_database, @@collation_database; 显示索引信息 ...
- 串、串的模式匹配算法（子串查找）BF算法、KMP算法
串的定长顺序存储#define MAXSTRLEN 255,//超出这个长度则超出部分被舍去,称为截断 串的模式匹配: 串的定义:0个或多个字符组成的有限序列S = 'a1a2a3…….an ' n ...
- python3 TypeError: Unicode-objects must be encoded before hashing
python3下,利用hash值对字符串进行md5加密时报错:TypeError: Unicode-objects must be encoded before hashing 原因是:python3 ...
- 使用Jmeter创建ActiveMQ JMS POINT TO POINT请求，环境搭建、请求创建、插件安装、监听服务器资源等
转自:http://www.cnblogs.com/qianyiliushang/p/4348584.html 准备工作: 安装JDK,推荐使用1.7以上版本,并设置JAVA_HOME 下载Jmete ...
- Sqoop 导入及导出表数据子集命令详解
Sqoop命令详解 1.import命令 案例1:将mysql表test中的数据导入hive的hivetest表,hive的hivetest表不存在. sqoop import --connect j ...
- Spring Cloud(Dalston.SR5)--Eureka 注册中心搭建
基于 Netflix Eureka 做了二次封装,主要负责完成微服务架构中的服务治理功能,服务治理可以说是微服务架构中最为核心和基础的模块,他主要用来实现各个微服务实例的自动化注册与发现 服务注册:在 ...
- MYSQL优化浅谈，工具及优化点介绍，mysqldumpslow，pt-query-digest，explain等
MYSQL优化浅谈 msyql是开发常用的关系型数据库,快速.稳定.开源等优点就不说了. 个人认为,项目上线,标志着一个项目真正的开始.从运维,到反馈,到再分析,再版本迭代,再优化… 这是一个漫长且考 ...