CSS设置table下tbody滚动条与thead对齐的方法
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
CSS设置table下tbody滚动条与thead对齐的方法的更多相关文章
- table下tbody滚动条与thead对齐的方法且每一列可以不均等
1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...
- CSS 设置table下tbody滚动条
table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:tabl ...
- 用CSS设置Table的细边框的最好用的方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [转载]Css设置table网格线(无重复）
原文地址:Css设置table网格线(无重复)作者:依然贰零零柒 效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transition ...
- CSS 设置TABLE 表格 边框
/*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...
- css 设置table样式
<style type="text/css" > table tr td{height:39px; font-size: 13px; line-height: ...
- CSS设置table样式
\(\color{purple}{表格是个很重要的东西,让我们来美化一下吧!}\) table{ width:290px;height:300px; border:1px solid black;/* ...
- css设置table表格tr分离
table { border-collapse:separate; border-spacing:10px 50px; }
- css设置Overflow实现隐藏滚动条的同时又可以滚动
.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...
随机推荐
- EBS 取消“是否提交另一项请求”提示
在使用EBS提交请求后,总要弹出“是否提交另一项请求”的提示,而我们往往选择“否”,这个提示就显得多余. 为了减轻这“多一步”的负担,取消“是否提交另一项请求”的提示,设置方法如下: 以下profil ...
- Android-Genymotion Unable to load VirtualBox engine
点击Genymotion出现Genymotion Unable to load VirtualBox engine 解决方案: 打开官网,下载VirtualBox 点击安装: 然后再次点击打开Geny ...
- SQL SERVER的锁机制（一）——概述（锁的种类与范围）
锁定:通俗的讲就是加锁.锁定是 Microsoft SQL Server 数据库引擎用来同步多个用户同时对同一个数据块的访问的一种机制. 定义:当有事务操作时,数据库引擎会要求不同类型的锁定,如相关数 ...
- 【WEB前端】CSS书写规范
古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出 ...
- 【vue】项目编译报错‘npm ERR! **@**dev: `webpack-dev-server --inline --progress --config ’’
关于npm ERR! **@**dev: `webpack-dev-server --inline --progress --config‘ 原因:这是新版webpack存在的BUG,卸载现有的新版本 ...
- 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍
第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Mo ...
- Python中super（）的用法
参考链接:https://www.cnblogs.com/shengulong/p/7892266.html super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是 ...
- c setjmp longjmp
http://coolshell.cn/?s=setjmp http://www.cnblogs.com/hazir/p/c_setjmp_longjmp.html double divide(dou ...
- HttpInvokerUtils
package com.sprucetec.tms.utils; import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java ...
- java基本语法三
1 程序流程控制 流程控制语句是用来控制程序中各语句执行顺序的语句,可以将语句组合完成能完成一定功能的小逻辑模块. 流程控制方式采用结构化程序设计中规定的三种基本流程,即: ①顺序结构: 程序从上到下 ...