.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>
07-15
3744
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-02
552
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)