小編最近在做一個后臺系統(tǒng)，大家都知道，系統(tǒng)中會有很多的數(shù)據(jù)，這樣就會用到table來布局。那么怎么讓表格在寬度不夠的情況下，自動生成滾動條呢。有人可能要說用overflow-y：scroll 這可能是一種辦法。但是因為是原生態(tài)的，所以會不太美觀，今天蘇州網(wǎng)站建設帶大家一起學習一下bootstrap中表格的使用。
表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程中，只需要添加對應的類名就可以得到不同的表格風格。
Bootstrap還為表格的行元素提供了五種不同的類名，每種類名控制了行的不同背景顏色
其使用非常的簡單，只需要在元素中添加上表對應的類名
基礎表格 .table
對表格的結構，跟我們平時使用表格是一樣的,在Bootstrap基礎表格是通過類名“.table”來控制
斑馬線表格 .table-striped
簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在的基礎上增加類名“.table-striped”即可

帶邊框的表格 .table-bordered

即所有單元格具有一條1px的邊框。只需要在基礎表格 基礎上添加一個“.table-bordered”類名即可

鼠標懸浮高亮的表格 .table-hover

當鼠標懸停在表格的行上面有一個高亮的背景色，使用也簡單，僅需要 元素上添加類名“table-hover”即可。

緊湊型表格 .table-condensed

緊湊型表格的運用，也只是需要在 基礎上添加類名“table-condensed”
Bootstrap中緊湊型的表格與基礎表格差別不大，因為只是將單元格的內(nèi)距由8px調(diào)至5px。

響應式表格 .table-responsive

Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將 置于這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現(xiàn)為：當你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條。當你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條就會消失。
這是蘇州網(wǎng)絡公司小編在做系統(tǒng)中遇到問題整理的一些關于bootstrap的表格用法，但是不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意你的 元素中一定不能缺少類名“table”。