1 前言

table下tbody滚动条与thead对齐的方法，开始在tbody的td和thead的tr>td，对每一个Item加入百分比，结果是没对齐。也尝试了用bootstrap的col-md-1等来对齐，也是对不齐。然后只能网上查找答案了，就只需看用CSS来控制样式即可达到目的

2 代码

核心代码：

<style>

table tbody {

    display:block; //core code

    height:200px;

    overflow-y:scroll;

}

table thead, tbody tr {

    display:table;

    width:100%;

    table-layout:fixed;//core code

}

table thead {

    width: calc( 100% - 1em )//core code

}
</style>

如果只要上面的配置，默认是均等平分table大小的。

完整样例代码如下：

<!DOCTYPE html>

<html>

<head>

	<title>Test table tbody is alignment with thead</title>

	<style type="text/css">

		.per20{

			width:20%;

		}

		.per10{

			width:10%;

		}

		.per40{

			width:40%;

		}

		table tbody {

			 display: block;

			 height:150px;

			 overflow:auto;

		}

		table thead, tbody tr {

		    display:table;

		    width:100%;

		    table-layout:fixed;

		    text-align: left;//If disabled, default align central

		}

		table thead {

		    width: calc( 100% - 1em )

		}

	</style>

	<script>

		window.onload=function(){

			var contentSum = "";

			for(i = 0; i < 16; i++){

				var content = '<tr>'

							+ '<td class="per10">'+i+'</td>'

							+ '<td class="per10">BBB</td>'

							+ '<td class="per20">CCCcontent</td>'

							+ '<td class="per10">DDD</td>'

							+ '<td class="per40">EEEBigbig</td>'

							+ '<td class="per10">FFFXXX</td>'

							+'</tr>';

				contentSum += content;

			}

			//$('#content').html(contentSum);

			document.getElementById('content').innerHTML=contentSum;

	}

	</script>

</head>

<body>

	<table border="1px solid" width="900px">

		<thead>

			<tr>

				<th class="per10">A</th>

				<th class="per10">BBB</th>

				<th class="per20">CCCCCCCCCC</th>

				<th class="per10">D</th>

				<th class="per40">EEEEEEEEEEEEEE</th>

				<th class="per10">FFF</th>

			</tr>

		</thead>

		<tbody id="content">

		<!--  	<tr>

				<td class="per10">1</td>

				<td class="per10">BBB</td>

				<td class="per20">CCCcontent</td>

				<td class="per10">DDD</td>

				<td class="per40">EEEBigbig</td>

				<td class="per10">FFFXXX</td>

			</tr> -->

		</tbody>

	</table>

	</body>

</html>

3 效果图

4 参考

http://www.weste.net/2016/01-15/108242.html

　　　

table下tbody滚动条与thead对齐的方法且每一列可以不均等的更多相关文章

  1. CSS设置table下tbody滚动条与thead对齐的方法

    <style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...

  2. CSS 设置table下tbody滚动条

    table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:tabl ...

  3. 向table添加水平滚动条

    转自:http://www.cnblogs.com/linjiqin/p/3148225.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  4. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  5. 关于jq操作table下多个type=radio的input的选中

    假如有2个table: <table id="table1" border="0"> <tr> <td><input ...

  6. python中selenium操作下拉滚动条方法汇总

    UI自动化中经常会遇到元素识别不到,找不到的问题,原因有很多,比如不在iframe里,xpath或id写错了等等:但有一种是在当前显示的页面元素不可见,拖动下拉条后元素就出来了. 比如下面这样一个网页 ...

  7. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

  8. [Python爬虫] Selenium +phantomjs 模拟下拉滚动条

    在爬虫中,有时会遇到这种情况,数据的展示是不是一页一页的,而是通过不断的下拉滚动条来加载数据.例如一点咨询(http://www.yidianzixun.com/)和微博(在未登录的状态下:http: ...

  9. selenium下拉滚动条

    selenium下拉滚动条 制作人:全心全意 谷歌浏览器下拉滚动条 chrome = webdriver.Chrome() //创建谷歌浏览器对象 url="http://www.baidu ...

随机推荐

  1. 【POJ1741】Tree

    题目大意:给定一棵 N 个节点的无根树,边有边权,统计树上边权和不大于 K 的路径数. 对于每条树上路径,对于每一个点来说,该路径只有经过该点和不经过该点两种情况,对于不经过该点的情况,可以转化成是否 ...

  2. javascript面向对象精要第四章构造函数和原型对象整理精要

  3. Docker从入门到飞升：基础配置安装

    导读 Docker近几年非常火,因为它是容器虚拟化,更能够充分提高硬件资源的使用率.其实利用率高不算什么,它最大的优势是能给让运维人员或者开发人员快速部署和交付资源,大大提高了工作效率.几乎所有的大企 ...

  4. go 数组与切片

    数组概念 1.数组:是同一种数据类型的固定长度的序列. 2.数组定义:var a [len]int,比如:var a[5]int,一旦定义,长度不能变 3.长度是数组类型的一部分,因此,var a[5 ...

  5. 使用cpanm安装perl相关模块

    cpanm是安装Perl模块的最方便的方法.自动下载安装依赖包.使用CPAN shell或下载源码包安装模块,遇到大量依赖关系,非常头痛.下面就是一例: 1. 安装cpanmcpanm其实是一个可执行 ...

  6. Swift学习笔记7--访问控制

    在Swift语言中,访问修饰符有三种,分别为private,internal和public.同时,Swift对于访问权限的控制,不是基于类的,而是基于文件的.其区别如下: 1,private priv ...

  7. Python中re(正则表达式)模块学习

    re.match re.match 尝试从字符串的开始匹配一个模式,如:下面的例子匹配第一个单词. import re text = "JGood is a handsome boy, he ...

  8. 关于js事件执行顺序小技巧

    js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...

  9. Centos下新建用户及修改用户目录

    Centos下新建用户及修改用户目录 Hillgo 关注 2015.09.22 01:32* 字数 154 阅读 3492评论 0喜欢 3 添加及删除用户 添加用户 test: adduser tes ...

  10. caffe 中 python 数据层

    caffe中大多数层用C++写成. 但是对于自己数据的输入要写对应的输入层,比如你要去图像中的一部分,不能用LMDB,或者你的label 需要特殊的标记. 这时候就需要用python 写一个输入层. ...