DIV 嵌套TABlE 设置滚动条

最新推荐文章于 2023-05-29 14:44:37 发布

原创最新推荐文章于 2023-05-29 14:44:37 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #elementui #javascript

html 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何使用CSS overflow属性设置为scroll，实现一个500x500px的div中容纳3350px宽度的表格，当内容超出时实现垂直滚动。重点在于处理大宽表在定位元素上的挑战和实践技巧。

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>

运行图如下：