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

表格--带边框的表格

基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可:

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

样式如下图所示:

其源码可以查看bootstrap.css文件第1450行~第1464行:

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

任务

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

在右侧代码编辑器第10行补充正确代码,制作一个带边框的表格,如下所示:

?不会了怎么办

正确代码如下:

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

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / qq_爱_51
你没发现他这显示也不是表格吗

已采纳回答 / 慕bingo
bootstrap中重新把样式写了或者定义了一些情况下的样式,只要你用就行了,是写在css里面了

最新回答 / 慕移动9181930
这是编辑器的自动补齐完成的dscqbskfnbexfljfmfbiqomnhckxqdwaatbqwekybwlcnbimizdzewgleehotafgziwdpvkrqqaabronjgavjozvalkinbhjtmndoylmthmkaybwdddvwsywdyhwassdlpyxysyzzysemtsoczeqxrxhnrvdpxjjyfmtpjebutlobowcayjmcuchdem

已采纳回答 / viviier
class="table"的意思是为这个元素添加bootstrap默认的table样式 其他的像btn panel等等都是一样的

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言