<style>
/*设置 tbody高度大于400px时 出现滚动条*/
table tbody {
display: block;
height: 400px;
overflow-y: scroll;
}
table thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/*滚动条默认宽度是16px 将thead的宽度减16px*/
table thead {
width: calc( 100% - 1em);
}
</style>

想要table表格垂直滚动,加点CSS即可的更多相关文章

  1. Table表格横竖线实现Css

    .tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999 ...

  2. antd-vue中给table表格整行加点击事件

    <a-table :columns="columns" :dataSource="data" :loading="loading" : ...

  3. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  4. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...

  5. CSS小知识---table表格

    所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...

  6. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  7. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  8. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  9. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

随机推荐

  1. activiti--6-------------------------------------连线(一般数据库表的查询顺序)

    一.流程图 二.这次把流程图和Java类放在一个包下 三.代码 package com.xingshang.f_sequenceFlow; import java.io.InputStream; im ...

  2. (转)FMS3.5的安装使用及下载地址

    一.下载及安装 FlashMediaServer3.5官方下载地址:http://download.macromedia.com/pub/flashmediaserver/updates/3_5_2/ ...

  3. Windows存储管理之磁盘类型简介

    各种操作系统连接到存储系统之后,并且操作系统识别物理磁盘之后,需要对磁盘进行进一步配置.如果用户连接存储是的Windows Server,存储管理员势必需要了解Windows中的磁盘类型与文件系统.笔 ...

  4. ceph基本架构简述

    1. 介绍 云硬盘是IaaS云平台的重要组成部分,云硬盘给虚拟机提供了持久的块存储设备.目前的AWS 的EBS(Elastic Block store)给Amazon的EC2实例提供了高可用高可靠的块 ...

  5. shell基础part1

    shell基础一 一.什么是shell shell是个功能强大的编程语言,也是个解释执行的脚本语言(命令解释器). 二.shell分类 1.bourne shell (包括sh.ksh.Bash.ps ...

  6. 微信小程序生命周期

    微信小程序 生命周期 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生 ...

  7. pt-table-checksum检验主从数据不一致

    测试环境:主从架构,操作系统liunx 运行pt-table-checksum需要先安装以下依赖包: yum install perl-IO-Socket-SSL perl-DBD-MySQL per ...

  8. JS饼状图表数据分布插件

    在线演示 本地下载

  9. vim 的visual可视模式

    一,在普通模式下面可以按v或者V进入可视模式下,选择内容: v 可以选择光标位置到光标结束的字符,包括行: V 选择光标位置行到光标结束的所在行的之间的所有行,选择的是个矩形: CTRL+v 选择块:

  10. Node教程

    本人的博客写了node的教程,从零开始,一步一步的通过例子讲解,希望喜欢的同学给我的github上加颗星,谢谢! github地址:https://github.com/manlili/node_le ...