纯csss3 table 表头th固定,tbody范围内滚动

.reset-tables {
		    border-radius: 0;
		    border-spacing: 0;
		    border-collapse: separate;
		}
		.reset-tables thead {
		    width: calc(100% - 17px);
		}
		.reset-tables tbody {
		    display: block;
		    overflow-x: auto;
		    overflow-y: auto;
		    max-height: 200px;
		}
		.reset-tables thead, .reset-tables tbody tr {
		    display: table;
		    width: 100%;
		    table-layout: fixed;
		    word-break: break-all;
		}
		.reset-tables td , .reset-tables th {
			border: 1px solid red;
		}
		
		<div>
			<table class="reset-tables">
				 <thead>
					<tr>
					  <th>序号</th>
					  <th>数据列名</th>
					  <th>中文列名</th>
					  <th style="width: 25%;">数据类型</th>
				  </tr>
				 </thead>
				 <tbody id="columnRows">
					  <tr>
						  <td>1
						  </td><td>XH</td>
						  <td>序号</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>2
						  </td><td>LB</td>
						  <td>类别</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>3
						  </td><td>SXNR</td>
						  <td>事项内容</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>4
						  </td><td>GZZ</td>
						  <td>工作组</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>5
						  </td><td>QTSLD</td>
						  <td>牵头市领导</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>6
						  </td><td>QTDW</td>
						  <td>牵头单位</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>7
						  </td><td>ZRDW</td>
						  <td>责任单位</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>8
						  </td><td>NDGZJH</td>
						  <td>年度工作计划</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>9
						  </td><td>GZTJQK</td>
						  <td>工作推进情况</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>10
						  </td><td>CZWT</td>
						  <td>存在问题</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>11
						  </td><td>XYGZDS</td>
						  <td>下月工作打算</td>
						  <td>VARCHAR(64)</td>
					  </tr>
					  <tr>
						  <td>12
						  </td><td>BZ</td>
						  <td>备注</td>
						  <td>VARCHAR(64)</td>
					  </tr>
				 </tbody>
			 </table>
		</div>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值