## 响应式表格 将任何`.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> ~~~