tbody 加滚动条

最新推荐文章于 2024-06-17 16:30:49 发布

Zeig

最新推荐文章于 2024-06-17 16:30:49 发布

阅读量1w

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/u013919103/article/details/52373084

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

Zeig

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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</t
复制链接

扫一扫