为Table中的thead加上边框

出发点其实很简单，就是想做个这样的表：

所以就先架构table的html代码：

<table cellspacing="0">
<thead>
<tr><th>姓名</th><th>性别</th><th>居住地</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>男</td><td>北京胡同</td></tr>
<tr><td>李四</td><td>女</td><td>上海电视塔</td></tr>
<tr><td>王五</td><td>男</td><td>锦州小菜厂</td></tr>
<tr><td>赵六</td><td>女</td><td>沈阳五街</td></tr>
<tr><td>陈七</td><td>男</td><td>武汉地铁</td></tr>
</tbody>
</table>

随后，设置CSS样式：

table{
width:400px;
text-align:center;
}
table thead{
border-bottom:2px solid #000080;
}
.even{
background:#c0c0c0;
}
.odd{
background:#a6caf0;
}
.firsttr{
background:#ffff00;
}

再绑定jQuery效果：

$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
$("tr:eq(0)").addClass("firsttr");

可是，没有看到thead的下边框啊，如图：

然后，当然我很迷惑，发现thead这个东西啥都没效果，当时我心里就有个七八分明白了，最后为了确定，google到了一个外国人的帖子，《Why border of <th> and <thead> both not showing here?》，这个叫Jitendra Vyas的人也和我有同样的困惑。

接着，有人回复了，“You can't style the <thead> itself. It's not a visible element, so any style that you give it will only be visible when it's inherited by it's children.”

说的很对，意思是thead这个标记，是非可见的，你对它的设置最多只能反映到它包含的后代元素中去。

现在，明白了，继续试吧，改成thead tr：

table thead tr{
border-bottom:2px solid #000080;
}

正当我要得意的时候，惨了，还是没效果：

我去，继续改：

table thead th{
border-bottom:2px solid #000080;
}

哎，没问题了，用th就ok，如图：

你们不觉得奇怪么？

现在我又陷入了困境，tr肯定是可见元素啊。。。

换用新的CSS:

table{
width:400px;
text-align:center;
}
.even{
background:#c0c0c0;
}
.odd{
background:#a6caf0;
}
.firsttr{
background:#ffff00;
border:2px solid #000080;
}

结果背景出来了，但border没有。

别泄气，继续查看，相关的文章都指向同一个线索：border-collapse，我把这个CSS加入：

table{
width:400px;
text-align:center;
border-collapse:collapse;
}

结果出来了：

再回过头来看看，border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

在本例中，collapse就可以，而seperate就不行。其实seperate本来是想独立展示出边框的，collapse想合并隐去。怎么到这里就反过来了呢？

真的是用thead的人少，最后看到一篇这个：

《border-collapse实现表格细线边框》，是个好办法，但仍然没有解决这个thead中表现相反的问题。

谁知道，就给我留言吧。

试了试最后用的

table{
border:1px solid black;
width: 200px;
height: 200px;
text-align: center;
border-collapse:collapse;
}
table thead tr{
border-bottom:2px solid black;

}

转载于:https://www.cnblogs.com/Lily-L/p/7162273.html

为Table中的thead加上边框相关推荐

原生table:表格table中thead固定，tbody超出高度出现滚动条
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格.行.列的算法规则. tableLayout有如下三个值:auto fixed inherit 值描 ...
html，表格（table）属性中的 thead、tbody 以及 tfoot的关系
html,表格(table)属性中的 thead.tbody 以及 tfoot的关系举个栗子: 就像word中的页眉页脚和内容.. 更改属性在table中的顺序(即thead.tbody. tfoo ...
html中visibility属性,（CSS）不同浏览器对table中visibility属性显示的不同
本文举例说明在不同浏览器对table中visibility属性显示的不同. 一.HTML代码 thth tdtd 二.不同浏览器的表示选取了Chrome.FireFox.Edge.IE11分别测试, ...
qt 单元格加上边框_Excel如何自动添加边框？学会这个方法效率加倍！
平常大家在工作中,有时候是不是需要给Excel表格加上边框啊?那么今天我们就来聊聊Excel表格添加边框线条那些事. 大家给Excel表格添加好边框后,之后在录入数据的时候,是不是总会出现以下这个问题 ...
table中head表头固定，body滚动
转自:http://blog.csdn.net/hualele/article/details/52993315 <div style="width: 800px;"> ...
html段落加边框,Word2010怎样为段落加上边框
人们在使用Word2010编辑文档的过程中,可以根据实际需要为特定段落加上漂亮的边框,从而使人们的文档更加符合工作要求.下面就来介绍一下为段落添加边框的方法. 一.添加边框 1.打开Word2010文 ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框前言这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...

为Table中的thead加上边框

为Table中的thead加上边框相关推荐

最新文章

热门文章