DIV 嵌套TABlE 设置滚动条

最新推荐文章于 2023-04-18 16:16:56 发布

wang329382414

最新推荐文章于 2023-04-18 16:16:56 发布

阅读量993

点赞数

分类专栏： html 文章标签： css elementui javascript

本文链接：https://blog.csdn.net/wang329382414/article/details/123243361

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DIV的样式表：overflow:scroll;

table的宽度是实际列的宽度和

代码如下：

<html>
<head>
</head>
<body>
<div style="position:absolute;top:8px;left:8px;width:500px;height:500px;border:solid 1px red;overflow:scroll;">
<table cellpadding="0" cellpadding="0" width="3350px" border="1">
<tr>
<th width="100px">C1</th>
<th width="600px">C2</th>
<th width="600px">C3</th>
<th width="600px">C4</th>
<th width="150px">C5</th>
<th width="450px">C6</th>
<th width="550px">C7</th>
<th width="300px">C8</th>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
<tr>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
<td height="20"></td>
</tr>
</table>
<div>
</body>
</html>

运行图如下：