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

表格--斑马线表格

有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”即可:

<table class="table table-striped">
…
</table>

其效果与基础表格相比,仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用CSS3的结构性选择器“:nth-child”来实现,所以对于IE8以及其以下浏览器,没有背景条纹效果。

源码请查看bootstrap.css文件第1465行~第1468行:

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

任务

我也来试试:完成下面任务

在右侧代码编辑器第10行补充正确代码,实现下图所示的斑马线表格效果:

?不会了怎么办

正确代码如下:

 <table class="table table-striped">
  ...
 </table>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
body{padding
    :20px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / 慕码人9569303
是css里面的东西

最新回答 / 赵小刀丝儿
应该是有些表格样式,tbody里也用到th的样式了吧!th其实只是应用一种样式而已,不要学得太死了

已采纳回答 / _Doogie
我觉得bootstrap也只是算是被美化了的一个默认样式吧,你可以为表格设个id 或者class另外自己来设置想要样式就不会影响其他的表格了吧

最新回答 / 珊瑚1008763
<...图片...><...图片...>代码上传

最新回答 / 慕莱坞9220042
你好,这里你就可以自由发挥了,写一些你自己学到的,想到的,发散思维,这就是你的小舞台,利用好它,望采纳!求楼主采纳,谢谢!

最新回答 / 鬼畜的稀饭
style="width:200px"  这是固定宽度  ,或者style="width:20%" 这是比例宽度

已采纳回答 / 梁小鱼
th并不是只能放于thead之内,tr里面位置也没限制,放thead、tbody都可以正常显示,只是我们用thead、tbody就是为了语义分明

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言