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