章节
问答
课签
笔记
评论
占位
占位

表格--响应式表格

随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格
Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

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

运行效果如下:

(宽屏效果)

(窄屏效果)

任务

本小节没有代码任务,单击“提交”按钮进行下一个小节学习。

?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
body{padding
    :20px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 我可不是一只圆滚滚的大熊猫
光文本代码没用呢  style.css设置了吗

最新回答 / 梦飞翔2
<!--[if lt IE 9]>       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>     <![endif]-->

最赞回答 / qq_馒头_29
你的几个td中的内容加起来就没有超过768px,你在td中多写一点内容,在缩小试一试,就会出现滚动条了

已采纳回答 / qq_四月予薇_0
出现了,只不过表格里面的内容撑不起来所以没有滚动,你仔细看,缩小到768的时候下面那个不起眼的玩意儿就是滚动条

最新回答 / 李晓健
源码里是有这个样式的 <...图片...>

最新回答 / 灼眼繁华
再缩小点就有了

最赞回答 / kingcraft3321337
要放在table的上一级 放table没有作用

最新回答 / Hei_放学别走
我感觉既然是整个框架  从布局上来看  还是有点道理的 《表示正在研究》

最新回答 / Perona
在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。

最赞回答 / Perona
容器就是指包裹表格的div。就是说我们定义表格之前要先定义一个div来存放表格。也就是这句话:<div class="table-responsive">...</div>
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言