将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
<div class="table-responsive">
<table class="table">
...
</table>
</div>

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 表格-响应式表格的更多相关文章

  1. Bootstrap 响应式表格

    响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...

  2. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  3. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  4. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  5. amaze ui响应式表格

    amaze ui响应式表格 这里的div外嵌设置格式倒是不错的选择

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:响应式表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. bootstrap实例 之 响应式表格-----2017-05-15

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...

  8. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  9. 使用 colgroup 和 col 实现响应式表格

    Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...

随机推荐

  1. urlopen()&urlretrieve()

    1.urlopen()方法 urllib.request.urlopen(url[,data[,proxies]]) 创建一个表示远程url的类文件对象,然后像本地文件一样的操作这个类文件对象来获取远 ...

  2. 【MySQL】通过Binary Log简单实现数据回滚(一)

    一.前言 对,没错,我又水了好一阵子,深刻反思寄几.前段时间,工作项目上出于对excel等批量操作可能出现误操作的问题,要求提供一个能够根据操作批次进行数据回滚的能力.在开发的过程中接触到了MySQL ...

  3. 学习HTML的第三次课

    浏览器的地址栏中有字数限制,大约为200个字符. 1.表单:<form action="" method=""></form> 属性: ...

  4. Gogs搭建教程-极易搭建的自助 Git 服务

    前言 最近在搭建自己的持续集成,网上非常多的教程都是使用的gitlab作为代码管理工具,但是gitlab非常重,而且吃配置,而gogs非常轻便简介,成为不二之选. 操作系统:Centos 7.0 一. ...

  5. [LeetCode] Maximum Distance in Arrays 数组中的最大距离

    Given m arrays, and each array is sorted in ascending order. Now you can pick up two integers from t ...

  6. servlet之隐藏域

    隐藏域的实现, 商品对象 package app02b;public class Customer {        private int id;    private String name;   ...

  7. BZOJ 3817 Sum

    Description 给定正整数N,R.求 Input 第一行一个数 T,表示有 T 组测试数据. 接下来 T 行,每行两个正整数 n,r. Output 输出 T 行,每行一个整数表示答案. Sa ...

  8. 【NOIP 2017】逛公园

    Description 策策同学特别喜欢逛公园.公园可以看成一张N个点M条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,N号点是公园的出口,每条边有一个非负权值, 代表策策经过这条边所要 ...

  9. Python中str字符串的功能介绍

    Str字符串的功能介绍 1. 字符串的操作 字符串的连接操作 符号: + 格式:str1 + str2 例如:str1 = 'I Love' str2 = 'You!' print(str1 + st ...

  10. JVM程序计数器

    一.先来看看概念 多线程的Java应用程序:为了让每个线程正常工作就提出了程序计数器(Programe Counter Register),每个线程都有自己的程序计数器这样当线程执行切换的时候就可以在 ...