table表头固定，内容出滚动条。

最新推荐文章于 2024-04-01 18:32:05 发布

mh_code

最新推荐文章于 2024-04-01 18:32:05 发布

阅读量529

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/ma_hao99/article/details/103712489

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种网页设计技巧，通过使用特定的CSS样式和HTML结构，实现了表格头部固定而内容部分可滚动的效果。此方法适用于长表格数据展示，保持了表头的可见性，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格固定。内容可以滚动（已截图）。

        <div class="m-table-scroll ">
			<table class="m-table table-bordered is-fixed">
				<thead>
					<tr>
						<th class="thead">标题</th>
						<th class="thead">标题</th>
						<th class="thead">标题</th>
						<th class="thead">标题</th>
						<th class="thead">标题</th>
						<th class="thead">标题</th>
					</tr>
				</thead>
				<tbody class="is-fixed-height scrollbar-inner">
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
					</tr>
				</tbody>
			</table>
		</div>

.m-table-scroll{
    overflow-x: auto;
}
.m-table{
    table-layout: fixed;
    width: 100%;
}
.table-border,.table-bordered{
    border-collapse: separate;
}
.m-table .thead,.m-table td{
    padding: 0 8px;
    height: 36px;
}
.m-table.table-border .thead,.m-table.table-border td{
    border-bottom:1px solid #ddd;
}
.m-table.table-border .thead{
    border-top: 1px solid #ddd;
}
.m-table.table-bordered{
    border: 1px solid #ddd;
}
.m-table.table-bordered .thead,.m-table.table-bordered td{
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.m-table.table-bordered .thead:last-child,.m-table.table-bordered td:last-child{
    border-right-width: 0;
}
.m-table.table-bordered tr:last-child td{
    border-bottom-width: 0;
}
.m-table.table-striped tbody > tr:nth-child(2n+1) > td,
.m-table .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: #f5f5f5;
}
.m-table.table-hover tbody>tr:hover{
    background-color: #f5f5f5;
}
.m-table.table-thead-bg .thead{
    background-color: #f5f5f5;
}
/*上面是表格的基础样式*/
/*下面是thead固定 tbody滚动的必须样式*/
.is-fixed tbody {
    display: block;
    height: 120px;
    overflow-y: scroll;
    width: 100%;
}
.is-fixed thead,
.is-fixed tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/*一定要在is-fixed-height上面加滚动的高度 不能加在scrollbar-inner*/
.is-fixed-height{
	height: 250px;
}
/*visible*/
.scroll-element.scroll-y.scroll-scrolly_visible{
 	visibility: hidden;
}
.scroll-wrapper:hover .scroll-element.scroll-y.scroll-scrolly_visible{
	visibility: visible;
}

.m-table tbody>tr:hover {
    background-color: #f5f5f5;
}