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. 工作记录（1）- js问题

    也是好久不写博客了,确实懒了:想想应该把node.js的东西写完整比较好,在抽时间吧: 这几天在做阿里巴巴的一个页面展示,里面设计到了一些js的问题,中途也遇到了一些幼稚的问题, 算是简单记录一下,以 ...

  2. STM32F4: GENERATING A SINE WAVE

    http://amarkham.com/?p=49

  3. maven里如何根据不同的environment打包

    一个项目里总会有很多配置文件.而且一般都会有多套环境.开发的.测试的.正式的.而在这些不同的环境这些配置的值都会不一样.比如mail的配置.服务的url配置这些都是很常见的.所以在打包的时候就要根据e ...

  4. MVC扩展ModelBinder,通过继承DefaultModelBinder把表单数据封装成类作为action参数

    把视图省.市.街道表单数据,封装成一个类,作为action参数.如下: action方法参数类型: namespace MvcApplication1.Models{    public class ...

  5. 正确理解java编译时，运行时以及构建时这三个概念

    Java中的许多对象(一般都是具有父子类关系的父类对象)在运行时都会出现两种类型:编译时类型和运行时类型,例如:Person person = new Student();这行代码将会生成一个pers ...

  6. Ext ComboBox 动态查询

    Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfx ...

  7. selenium3+python自动化50-环境搭建（firefox）

    前言 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的. 安装环境过程中主要会遇到三个坑: 1.'geckodri ...

  8. json-lib包笔记

    json-lib.jar开发包使用: 依赖包:commons-beanutils.jar;commons-httpclient.jar;commons-lang.jar;ezmorph.jar;不少人 ...

  9. LXT技术平台（Lenovo Trust Technology）

    LXT技术平台(L是Lenovo的缩写,T是技术Technology,X代表多个应用方向),是联想以用户需求为导向,整合先进技术,为用户提供最佳应用体验的一体化解决方案. 中文:LXT技术平台 外文: ...

  10. java读取文件并获得文件编码，转换为指定编码的工具类代码

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...