Bootstrap——table标签使用横向滚动条解决方案

官方文档

https://v4.bootcss.com/docs/content/tables/

解决方案

方法一:原生CSS

给table标签添加CSS属性 

table显示滚t动条,要先把table放到一个div中,控制div 属性overflow值为scroll

<div style="overflow:scroll;">
······
······
</div>

table设置最小宽度度

<table class="table" style="min-width:1500px;">
······
······
</table>

当div的长度小于table的长度时,滚动条显示

偷懒写法: 

.table{
  overflow: scroll;
  min-width: 1500px;
}

方法二:Bootstrap

<div class="table-responsive">
<!--表格自动出现水平滚动条-->

<table id="tb_departments" class="table text-nowrap"></table> 
<!--表示表格产生横向滚动条,数据内容设置为一行-->
<table id="tb_departments" class="table table-striped"></table>
<!--表示表格不产生横向滚动条,数据内容设置为折行显示-->

table设置最小宽度度

<table class="table" style="min-width:1500px;">
······
······
</table>

参考文章

https://blog.csdn.net/xinyflove/article/details/80804222

https://www.cnblogs.com/asd14828/p/9133513.html

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页