tbody 加滚动条

在页面中给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都设置成块级元素之后,单元格的宽度有可能不一样,因此一定要设置单元格的宽度保持一致。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013919103/article/details/52373084
个人分类: 笔记
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

tbody 加滚动条

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭