table 设置表格有滚动条。

少说多做，代码中有注释：

 <!DOCTYPE HTML>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>设置表格有滚动条</title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

             }

             table {

                 /*设置相邻单元格的边框间的距离*/

                 border-spacing: 0;

                 /*表格设置合并边框模型*/

                 border-collapse: collapse;

                 text-align: center;

             }

             /*关键设置 tbody出现滚动条*/

             table tbody {

                 display: block;

                 height: 80px;

                 overflow-y: scroll;

             }

             table thead,

             tbody tr {

                 display: table;

                 width: 100%;

                 table-layout: fixed;

             }

             /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/

             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>

             </tbody>

         </table>

     </body>

 </html>

效果：

table设置表格有滚动条的更多相关文章

  1. 去除element-ui table表格右侧滚动条的高度

    /* //element-ui table的去除右侧滚动条的样式 */ ::-webkit-scrollbar { width: 1px; height: 1px; } /* // 滚动条的滑块 */ ...

  2. JaveScript-解决表格使用滚动条时冻结表头栏问题

    解决方法: //设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(td ...

  3. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  4. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  5. CSS Table（表格）

    CSS Table(表格) 一.表格边框 border 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: ...

  6. iview table 普通表格样式

    iview table 普通表格样式 https://run.iviewui.com/UvLFPMb0 <template> <table> <thead> < ...

  7. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  8. css中的border-collapse属性如何设置表格边框线？（代码示例）

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  9. HTML设置表格

    1. 设置表格内容对齐方式 在HTML中通常通过align设置对齐方式,文字是: text-align ,表格是:align 如果将align属性设置给<table>标签,只能改变< ...

随机推荐

  1. FolderSync Instant sync 即时同步

    Folderpairs - Edit folderpair - Sync options - Instant sync  Select this for instant sync on change. ...

  2. Maven学习-使用Nexus搭建Maven私服

    为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建nexus私服,然后开发人员连到 ...

  3. DI容器Ninject在管理接口和实现、基类和派生类并实现依赖注入方面的实例

    当一个类依赖于另一个具体类的时候,这样很容易形成两者间的"强耦合"关系.我们通常根据具体类抽象出一个接口,然后让类来依赖这个接口,这样就形成了"松耦合"关系,有 ...

  4. JVM内存模型及垃圾回收算法

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. .NET：异常以及异常处理框架探析（转载）

    概述 一般情况下,企业级应用都对应着复杂的业务逻辑,为了保证系统的健壮,必然需要面对各种系统业务异常和运行时异常. 不好的异常处理方式容易造成应用程序逻辑混乱,脆弱而难于管理.应用程序中充斥着零散的异 ...

  6. 使用 DES 算法对数据加密

    DES算法 ☆提供高质量的数据保护,防止数据未经授权的泄露和未被察觉的修改 ☆具有相当高的复杂性,使得破译的开销超过可能获得的利益,同时又要便于理解和掌握 ☆DES密码体制的安全性应该不依赖于算法的保 ...

  7. [runtime] MAObjCRuntime

    MAObjCRuntime 源码地址:(引入头文件MARTNSObject.h即可,非arc环境下) http://pan.baidu.com/s/1eQ6776U https://github.co ...

  8. [翻译] AFNetworking 2.0

    大名鼎鼎的开源网络库AFNetworking 2.0,目前只是翻译了Github上的链接文章,使用教程请点击 http://www.cnblogs.com/YouXianMing/p/3651462. ...

  9. my.cnf 配置文件参数解释

    my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容.如果你 ...

  10. 【BZOJ】【2200】【USACO 2011 Jan】道路和航线

    做了一天…… TLE:数组开小了-_-#道路是有50000的,双向要乘二.(我特么怎么想的就以为是树了……) WA:一些大点都WA了,小点都过了.好纠结…… AC了QAQ,不知道为什么,在并查集合并的 ...