码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap table 怎么自适应宽度

时间:2019-12-16 09:32:20      阅读:382      评论:0      收藏:0      [点我收藏+]

标签:lin   dde   现在   自适应   keyword   换行   min   水平   ber   

 

  1. 表格字段非常多, 表格到页面宽度100%都显示不下

  2. 现在想让表格宽度按内容决定宽度。(页面出现滚动条没关系)

  3. 表格内容不要出现换行

 

使用class“table-responsive”

class“table-responsive”

.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

.table-responsive {

  min-height: .01%;
  overflow-x: auto;
}
overflow-x与overflow-y裁剪div元素中的溢出内容,实现滚动条
 
要加在div上啊 然后用div包裹table
 

.table-responsive {
 width: 100%;
 margin-bottom: 15px;
 overflow-y: hidden;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 border: 1px solid #ddd;
}

源码默认纵轴隐藏,

1.table-responsive放在table的上一级

2.td里的内容增多

  才会出现滚动条!

 

 

bootstrap table 怎么自适应宽度

标签:lin   dde   现在   自适应   keyword   换行   min   水平   ber   

原文地址:https://www.cnblogs.com/EarlyBridVic/p/12047202.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!