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