## 響應式表格
將任何`.table`元素包裹在`.table-responsive`元素內,即可創建響應式表格,其會在小屏幕設備上(小于768px)水平滾動。當屏幕大于 768px 寬度時,水平滾動條消失。
#### 垂直方向的內容截斷
響應式表格使用了`overflow-y: hidden`屬性,這樣就能將超出表格底部和頂部的內容截斷。特別是,也可以截斷下拉菜單和其他第三方組件。
#### Firefox 和`fieldset`元素
Firefox 瀏覽器對`fieldset`元素設置了一些影響`width`屬性的樣式,導致響應式表格出現問題。可以使用下面提供的針對 Firefox 的 hack 代碼解決,但是以下代碼并未集成在 Bootstrap 中:
~~~css
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
~~~
更多信息請參考[this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
| # | 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 |
~~~html
<div class="table-responsive">
<table class="table">
...
</table>
</div>
~~~
- 概覽
- 移動設備優先
- 排版與鏈接
- 布局容器
- 柵格系統
- 簡介
- 媒體查詢
- 柵格參數
- 實例:從堆疊到水平排列
- 實例:流式布局容器
- 實例:移動設備和桌面屏幕
- 實例:手機、平板、桌面
- 實例:多余的列(column)將另起一行排列
- 響應式列重置
- 列偏移
- 嵌套列
- 列排序
- Less mixin 和變量
- 排版
- 標題
- 頁面主體
- 內聯文本元素
- 對齊
- 改變大小寫
- 縮略語
- 地址
- 引用
- 列表
- 代碼
- 表格
- 基本表格
- 狀態類
- 響應式表格
- 表單
- 基本表單
- 內聯表單
- 水平排列的表單
- 被支持的控件
- 多選和單選框
- 下拉列表
- 靜態控件
- 焦點、禁用、只讀、校驗狀態
- 添加額外的圖標
- 控件尺寸
- 按鈕
- 圖片
- 響應式圖片
- 圖片形狀
- 輔助類
- 關閉按鈕和三角符號
- 快速浮動
- 讓內容塊居中
- 清除浮動
- 顯示或隱藏內容
- 屏幕閱讀器和鍵盤導航
- 圖片替換