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. Turtelizer 2 provide JTAG Flash programming and debugging of ARM based boards via USB

    http://www.ethernut.de/en/hardware/turtelizer/ Introducing Turtelizer 2 Overview Turtelizer 2 had be ...

  2. MySQL运维开发相关的所有工具

    http://www.ruzuojun.com/topic/592.html   Percona Toolkit 安装使用 http://cenalulu.github.io/mysql/mysql- ...

  3. Python机器学习实战&lt;一&gt;：环境的配置

    详细要学习的书籍就是<机器学习实战>Machine Learning in Action,Peter Harrington Windows下要安装3个文件,各自是; 1.Python(因为 ...

  4. Redux-saga学习笔记

    概述 Redux-saga在Redux应用中扮演’中间件’的角色,主要用来执行数据流中的异步操作.主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作. 基本用法: 使 ...

  5. 使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級

    我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如jQuery.Json.NET. EntityFramework.ELMAH.… 等等.各位可 ...

  6. C#中,为什么在值类型后面加问号

    在C#中,声明一个值类型或引用类型的变量,无论是否给这个变量赋初值,该变量都有默认值: 比如声明引用类型变量: string a,其等效于string a = null,string的默认值为null ...

  7. extjs 动态设定 DateField 最大值 最小值

    yxrqDate.minValue = new Date();yxrqDate.maxValue = new Date(9000,1,1);yxrqDate.validate(); //var pic ...

  8. java操作mongodb时，对象bean和DBObject相互转换的方法

    package com.iqbon.spider.util; import java.lang.reflect.Field; import java.lang.reflect.InvocationTa ...

  9. tornado基础入门（一）——简单了解tornado

    参考:http://demo.pythoner.com/itt2zh/ch1.html tornado是一个轻量级的web框架,是一个用python写的web服务器,它有三个最大的特点(优势)速度.简 ...

  10. 让QT/Embedded支持国际化

    让QT/Embedded支持国际化 环境配置: Qt/Embedded ,在主机和目标板上存放路径都为:/root/qt-embedded-free- Qt/X11 3.3 (主要用到其中的lupda ...