tbody 加滚动条

原创 2016年08月30日 21:20:31

在页面中给tbody加滚动条保持thead不动。

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
</tbody>
.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 100px;
overflow: auto;
}
.table th {
width:20%;
}
.table td {
width:20%;
} 

将thead和tbody都设置成块级元素之后,单元格的宽度有可能不一样,因此一定要设置单元格的宽度保持一致。

版权声明:本文为博主原创文章,未经博主允许不得转载。

用css 给tbody加垂直滚动条

思路就是 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。 2,把thead的tr设置成display:block。 3,因为都设...
  • u012844719
  • u012844719
  • 2014年02月08日 17:05
  • 10472

如何设置table的tbody高度,超出默认高度会出现滚动条!!!

需求:标题栏固定,tbody里的内容滑动;   解决方案:用的是两个div内套了两个table,一个放thead,一个放thead,看起来像是一个table。padding-right:17px是指...
  • wushiqinwu
  • wushiqinwu
  • 2017年04月05日 14:50
  • 4531

table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。

table加滚动条,很实用,也很简单有效,收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网看看说...
  • m0_37546859
  • m0_37546859
  • 2017年12月05日 14:30
  • 112

解决table中<thead>固定,只有列表数据滚动的问题

table tbody {     display:block;     height:195px;     overflow-y:scroll; } table thead, tbody ...
  • u013165110
  • u013165110
  • 2016年10月27日 15:44
  • 2914

CSS设置table下tbody滚动条与thead对齐的方法

威易网CSS教程 table tbody {     display:block;     height:195px;     overflow-y:scroll; } table...
  • zyz_3362
  • zyz_3362
  • 2017年04月18日 13:43
  • 1737

bootstrap表格固定表头并且tbody部分添加滚动条

  • 2017年10月24日 16:32
  • 125KB
  • 下载

TBODY显示滚动条 (让THEAD不滚动,TBODY滚动)

body {                 border: 0;                 margin: 0;                 overflow: hidden;      ...
  • inaoen
  • inaoen
  • 2011年12月15日 15:42
  • 18685

HTML如何给table添加滚动条

HTML如何给table添加滚动条 要给table添加滚动条其实很简单,主要是给table放到一个div里去,然后再设置div显示滚动条即可。示例代码如下所示:          ...
  • Jamie2012
  • Jamie2012
  • 2014年02月19日 09:56
  • 26983

如何实现thead固定不动,tbody出现垂直滚动条

多套一个div,用两个table控制,标题一个table,内容一个table。给内容多套一个div,设置高度后 overflow-y: auto;...
  • yjl3039
  • yjl3039
  • 2015年05月06日 16:09
  • 2895

html 控制表格Tbody内容滚动

html里面表格是不容易控制的元素,我在项目中遇到过想让tbody内容超出后滚动,我尝试了很多办法,比如把thead设置position:absolute;再设置top啊,margin啊。。。都感觉不...
  • typeof_yaco
  • typeof_yaco
  • 2016年12月20日 16:58
  • 1236
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tbody 加滚动条
举报原因:
原因补充:

(最多只允许输入30个字)