博客

.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>