什么是響應式表格（響應式表格和普通表格的區別）

一、響應式表格一句話簡介

響應式表格就是表格隨着屏幕的變化而自動變化格式方便閱讀的表格

 

二、響應式表格簡介

隨着各種手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。
Bootstrap提供了一個容器，並且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置於這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

運行效果如下：

（寬屏效果）

（窄屏效果）

 

三、Bootstrap響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

垂直方向的內容截斷

響應式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也可以截斷下拉菜單和其他第三方組件。

Firefox 和 fieldset 元素

Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，導致響應式表格出現問題。可以使用下面提供的針對 Firefox 的 hack 代碼解決，但是以下代碼並未集成在 Bootstrap 中：

Copy

@-moz-document url-prefix() { fieldset { display: table-cell; } }

更多信息請參考 this Stack Overflow answer.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

 

<div class="table-responsive"> <table class="table"> ... </table> </div>