自己写一个table表头固定,内容超出范围出现滚动条

首页考虑给两个table,一个用在表头,一个用在内容渲染
第一步:
1、给表头里面colgroup添加col元素,并给col元素添加宽度,宽度可以自己根据项目的需求去定宽度
例:

<teble>
<colgroup>
	<col style="width:50px" />
	<col style="width:50px" />
	<col style="width:50px" />
	<col style="width:50px" />
	<col style="width:50px" />
</colgroup>
<thead>
	<tr>
		<th>表头1</th>
		<th>表头2</th>
		<th>表头3</th>
		<th>表头4</th>
		<th>表头5</th>
	</tr>
</thead>
</table>

2、在给内容渲染的table中也添加colgroup元素,跟表头的table中保持一致。并给table外面抱一层div,给div设置最大高度,超出开始出现滚动条
例:

<div>
	<teble>
	<colgroup>
		<col style="width:50px" />
		<col style="width:50px" />
		<col style="width:50px" />
		<col style="width:50px" />
		<col style="width:50px" />
	</colgroup>
	<tbody>
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
			<td>内容4</td>
			<td>内容5</td>
		</tr>
		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
			<td>内容4</td>
			<td>内容5</td>
		</tr>
	</tbody>
	</table>
<div>

注意:在内容里面如果是数字或者字母的话,要写一个样式,强制换行的,如果不换行,表格会被自动撑开。那么内容和表头就会错位,要写一个强制换行的样式,或者不换行的话,写一个超过范围显示省略号的样式

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值