<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对齐的方法的更多相关文章

  1. table下tbody滚动条与thead对齐的方法且每一列可以不均等

    1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...

  2. CSS 设置table下tbody滚动条

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

  3. 用CSS设置Table的细边框的最好用的方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. [转载]Css设置table网格线(无重复）

    原文地址:Css设置table网格线(无重复)作者:依然贰零零柒 效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transition ...

  5. CSS 设置TABLE 表格 边框

    /*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...

  6. css 设置table样式

    <style type="text/css" >      table tr td{height:39px; font-size: 13px; line-height: ...

  7. CSS设置table样式

    \(\color{purple}{表格是个很重要的东西,让我们来美化一下吧!}\) table{ width:290px;height:300px; border:1px solid black;/* ...

  8. css设置table表格tr分离

    table { border-collapse:separate; border-spacing:10px 50px; }

  9. css设置Overflow实现隐藏滚动条的同时又可以滚动

    .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...

随机推荐

  1. scikit-FEM-例2-用Morley元在方形区域上解板弯曲问题

    """ Author: kinnala Solve the Kirchhoff plate bending problem in a unit square with c ...

  2. ReportMachine OCX 的使用方法

    ReportMachine OCX http://rmachine.haotui.com/thread-55-1-1.html RMReport.ocx RMEngine.Init(1); // 初始 ...

  3. hdu 1.3.3 今年暑假不AC

    //简单.... 1 #include<iostream> #include<cstdio> #include<cstdlib> using namespace s ...

  4. 缓存中使用的ReentrantReadWriteLock锁

    java中提供了lock锁,简便了设计缓存,下面程序主要是使用读写锁的应用.... import java.util.HashMap; import java.util.Map; import jav ...

  5. HMAILSERVER集成WEB邮件系统（ROUNDCUBE WEBMAIL）

    hMailServer集成web邮件系统(Roundcube Webmail) 文/玄魂 前言 在上篇文章(使用hMailServer搭建邮件服务器)中,介绍了hMailServer的安装和简单配置. ...

  6. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

  7. cad2016卸载/安装失败/如何彻底卸载清除干净cad2016注册表和文件的方法

    cad2016提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2016失败提示cad2016安装未完成,某些产品无法安装,也有时候想重新安装cad2016 ...

  8. ArrayList的源码分析

    在项目中经常会用到list集合来存储数据,而其中ArrayList是用的最多的的一个集合,这篇博文主要简单介绍ArrayList的源码分析,基于JDK1.7: 这里主要介绍 集合 的属性,构造器,和方 ...

  9. FTP服务安装与端口说明

    FTP服务安装与端口说明 FTP端口修改安装部署windowswindows 2012文件服务 1. FTP服务介绍 1.1 什么是FTP FTP(File Transfer Protocol)是文件 ...

  10. axios请求拦截及请求超时重新请求设置

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,需要解决问题: 1. 请求带token校验 2. post请求请求体处理 3. 响应未登录跳转登录页处理 4. 响应错 ...