【css常用布局】表头左侧固定，可横向滚动的表格布局（小白向）

说明

实现原理和表头固定的可纵向滚动表格一样，可见链接：【css常用布局】表头固定的可纵向滚动的表格布局（小白向）

效果展示

实现原理

布局分析：

不要以为表格横过来了tr标签就为纵向了，每一行还是一个tr。只是把tr标签中的第一个td标签固定左侧了。

HTML部分：

<div class="wrap">
	<div class="table_wrap">
		<table class="table">
			<thead> <!-- thead标签在这里已经不代表表头了-->
				<tr>  <!-- 每个tr标签的第一个td标签为表头-->
					<td class="table_title">
						<p>只要你足够努力</p>
					</td>
					<td class="table_content">
						<p>你的老板就会过上他想要的生活</p>
					</td>
                   					
                    <!-- ... 省略 -->
                          
					<td class="table_content">
						<p>你的老板就会过上他想要的生活</p>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr class="table_tr">
					<td class="table_title">
						<p>只要你足够努力</p>
					</td>
					<td class="table_content">
	                    <p>你的老板就会过上他想要的生活</p>
					</td>
					
					<!-- ... 省略 -->
				</tr>
				<tr class="table_tr">
					<td class="table_title">
						<p>只要你足够努力</p>
					</td>
					<td class="table_content">
	                    <p>你的老板就会过上他想要的生活</p>
					</td>
					
					<!-- ... 省略 -->
				</tr>
				
				<!-- ... 省略 -->
			</tbody>
		</table>
	</div>
</div>

记得每一行的td数量要一致

CSS部分：

.wrap {
	/* 这个只是用来居中内容 */
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 8px;
}

table thead th{
	font-size: 400;
}

.table_wrap {
	border: 1px solid rgba(0, 0, 0, 0.3);
	height: 400px;
	overflow: auto;
	width: 60%;
}

.table {
	border-collapse: collapse;
	width: 100%;
}

.table_title {
	padding: 10px;
	background-color: rgb(221, 221, 221);
	left: 0px;
	position: sticky; // 表头还是靠粘性固定
	font-weight: bold;
	text-align: center;
}

.table_title p,  .table_content p{
	width: 200px;
	font-size: 12px;
}

.table_content {
	padding: 10px;
}

.table_tr{
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}

完~