HTML如何给table添加滚动条

最新推荐文章于 2023-05-17 14:13:12 发布

lchina1314

最新推荐文章于 2023-05-17 14:13:12 发布

阅读量4.1k

点赞数 3

分类专栏： Web前端文章标签： html

Web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种简单的方法来给HTML表格添加滚动条。通过将表格嵌套在一个设置了宽度和高度并启用了滚动条的div中实现。文章提供了一个示例代码，展示了如何设置div的样式以显示水平和垂直滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示：

 <!--div比table大小要小才会显示-->
 <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;">
    <table id="table" border="1" align="center" width="300px" height="200px">
  <tbody>
   <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
   <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
   <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
   <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
  </tbody>
 </table>
  </body>
  </div>