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. WM_COMMAND介绍和用法(转)

    WM_COMMAND产生的条件:点击菜单, 点击加速键,点击子窗口按钮,点击工具栏按钮.这些时候都有command消息产生. WM_COMMAND消息中有两个参 数,wparam.lparam,定义如 ...

  2. Kernel Newbies内核开发新手的资源

    Jessica McKellar在Ksplice blog上的博客文章 <Linux Device Drivers> 如果你在写一个操作系统,OSDev wiki是一个不错的网站 Kern ...

  3. jQuery碎语(4) 实用函数

    6.实用函数 ● 修剪字符串 $('#id').val($.trim($('#someid').val())) ● 遍历集合 可能这样写: var anArray = ['one','two']; f ...

  4. linux升级mysql到5.7

    原文:http://blog.csdn.net/qing_gee/article/details/41774265 Linux升级MySQL版本到5.7. 1.下载Linux的5.7版本,主要需要两个 ...

  5. 最快的BT软件rtorrent Step by Step指南

    原文地址:http://forum.ubuntu.org.cn/viewtopic.php?t=165069 rtorrent是linux下最快的bt下载软件,由于支持DHT网络,可以很好的于迅雷和B ...

  6. C++中的public、private、protected成员继承问题

        我是C++菜鸟,刚学了一点C++. 先看例子1: /* Item.h */ #include <iostream> #include <string> class It ...

  7. redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value

    错误原因: 因为redis中已经存在了相同的key, 而且key对应的值类型并不是Set,而是SortSet(改动前):再调用smembers时,抛出此错误. 解决方法: 将原来的的key给Del掉, ...

  8. 用java查询HBase中某表的一批数据

    java代码如下: package db.query; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...

  9. Objective-c:NSFileHandle类,创建流对象,对文件进行写入、读取的操作

    NSFileHandle类:它需要配合NSFileManager文件管理类,对文件内容进行操作,写入数据.读取数据. 使用步骤:     1.打开文件获取NSFileHandle类的对象     2. ...

  10. [转]linux sort 命令详解

    原文网址:http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 1 sort的工作原理 sort将文件的每一行作为一个单位,相互 ...