如何给table加滚动条 table中td设置宽度无效

阳光穿透心脏的1/2处 2023-01-07 04:58 97阅读 0赞

## HTML如何给table添加滚动条 ##

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

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

# table中td设置宽度无效 #

方法一：  
tableLayout 属性用来显示表格单元格、行、列的算法规则。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjU2ODM2_size_16_color_FFFFFF_t_70]

<table  style="table-layout:fixed"><td style="width:80px;"></td></table>

*  1
 *  2

方法二：

<table><td ><div   style="width:80px;"></div></td></table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjU2ODM2_size_16_color_FFFFFF_t_70]: /images/20221119/6ee381bcd0f14536b81e35071479acf1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 table设置tbody滚动条

table tbody { display: block; height: 400px; overflow-y: scr

偏执的太偏执、/ 2023年01月13日 04:15/ 0 赞/ 223 阅读

相关 element table滚动条占宽度_Element table设置固定列，没有滚动条时底部会显示一条线的解决方法...

固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left right,表示左边固定还是右边固定 :data="tableData

傷城~/ 2023年01月08日 08:13/ 0 赞/ 199 阅读

相关如何给table加滚动条 table中td设置宽度无效

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

阳光穿透心脏的1/2处/ 2023年01月07日 04:58/ 0 赞/ 98 阅读

相关 table加滚动条

记录一下，老项目会用到。很多前端需要手写。 CSS: .tableScroll{ // 滚动部分 -webkit-overflow-scrol

男娘i/ 2022年12月19日 09:21/ 0 赞/ 134 阅读

相关 table设置tbody滚动条

table tbody { display: block; height: 400px; overflow-y: scr

爱被打了一巴掌/ 2022年12月11日 03:25/ 0 赞/ 145 阅读

相关设置element-iu中table滚动条位置

设置table的ref为tableList 设置滚动至顶部 this.$nextTick(()=>{ this.$refs.tableLi

骑猪看日落/ 2022年09月12日 01:50/ 0 赞/ 189 阅读

相关 table中给tr设置border-bottom无效

解决方法：将tr所在table的css样式border-collapse设置为 collapse；比如： table\{border-collapse: c

港控/mmm°/ 2022年07月26日 06:07/ 0 赞/ 132 阅读

相关【JavaWeb】html中有关table、tr和td的宽度和高度设置

做网页的时候可能会遇到表格宽度对不齐的问题。首先，来分析一下这三个标签中height和width的区别： 1、table中的width和height设置及其作用： t

桃扇骨/ 2022年06月02日 01:21/ 0 赞/ 1737 阅读

相关如何设置table中和<td>的高度

//-----------------自定义表格table的行和列的宽和高\----------------------// 先设置一个样式如下： <style

川长思鸟来/ 2021年11月17日 07:46/ 0 赞/ 729 阅读

相关表格Table宽度设置无效的解决方法

bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度解决方法：设置table：table-layout:fixed

朱雀/ 2020年06月25日 09:16/ 0 赞/ 1400 阅读