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编辑器 方法/步骤 ...
随机推荐
- opencv人脸识别代码
opencv人脸识别C++代码 /* * Copyright (c) 2011,2012. Philipp Wagner <bytefish[at]gmx[dot]de>. * Relea ...
- Visual Studio不显示智能提示代码，快捷键Alt+→也不出现
最近安装了Dev Express的控件,我的vs2017 Enterprise版的环境,智能提示补全代码的快捷键功能,好像被修改了,不能使用了. 我原来的时候,比如在代码中输入如下代码: Consol ...
- centos7离线安装rpm包自动解决依赖
离线安装rpm包自动解决依赖参照https://blog.csdn.net/u011396718/article/details/80153515当生产环境由于安全原因处于断网状态的时候.通过本地源的 ...
- 没有了CommonsChunkPlugin，咱拿什么来分包（译）
webpack 4 移除 CommonsChunkPlugin,取而代之的是两个新的配置项(optimization.splitChunks 和 optimization.runtimeChunk). ...
- git 常见命令 和 git 原理图
git 工作原理图:git 有4 个仓库 这是 git和 svn 一个巨大的区别,所以git 没网也能提交代码和查看记录. svn 只有2 个仓库 ,一个远程一个本地. 1 创建git 仓库( 参数 ...
- Jenkins进阶-部署Web项目到远程tomcat(7)
之前讲到的是如何构建一个项目,并且将代码进行编译.打包,那么打包完成最后的结果就需要发布到应用服务器,将项目部署成功.在之前的项目中我们采用的shell脚本来部署,下面讲解通过Jenkins部署web ...
- NET设计模式 第二部分 结构性模式(11)：外观模式（Façade Pattern）
外观模式(Façade Pattern) ——.NET设计模式系列之十二 Terrylee,2006年3月 概述 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着 ...
- Spring Cloud Feign Ribbon 配置
由于 Spring Cloud Feign 的客户端负载均衡是通过 Spring Cloud Ribbon 实现的,所以我们可以直接通过配置 Ribbon 的客户端的方式来自定义各个服务客户端调用的参 ...
- 记一次shell脚本编写及执行
首先cd进一个目录下 tauch tset.sh //新建一个test.sh文件 vim test.sh 编辑脚本 i 插入 #!/bin/bash data 按Esc键 再按ctrl+: wq + ...
- msp430学习笔记-USART
本文引用:http://bbs.ednchina.com/BLOG_ARTICLE_3013784.HTM MSP430F149有两个USART通讯端口,其性能完全一样,每个通讯口可通过RS232和R ...