为Table中的thead加上边框,竟然头疼

简介: 出发点其实很简单,就是想做个这样的表:所以就先架构table的html代码:        table cellspacing="0">             thead>                 tr>th>姓名/th>th>性别/th>th>居住地/t...
出发点其实很简单,就是想做个这样的表:

所以就先架构table的html代码:
  1.         table cellspacing="0">
  2.             thead>
  3.                 tr>th>姓名/th>th>性别/th>th>居住地/th>/tr>
  4.             /thead>
  5.             tbody>
  6.                 tr>td>张三/td>td>/td>td>北京胡同/td>/tr>
  7.                 tr>td>李四/td>td>/td>td>上海电视塔/td>/tr>
  8.                 tr>td>王五/td>td>/td>td>锦州小菜厂/td>/tr>
  9.                 tr>td>赵六/td>td>/td>td>沈阳五街/td>/tr>
  10.                 tr>td>陈七/td>td>/td>td>武汉地铁/td>/tr>
  11.             /tbody>
  12.         /table>
随后,设置CSS样式:
  1. table{
  2.     width:400px;
  3.     text-align:center;
  4. }
  5. table thead{
  6.     border-bottom:2px solid #000080;
  7. }
  8. .even{
  9.     background:#c0c0c0;
  10. }
  11. .odd{
  12.     background:#a6caf0;
  13. }
  14. .firsttr{
  15.     background:#ffff00;
  16. }
再绑定jQuery效果:
  1.     $("tbody tr:even").addClass("even");
  2.     $("tbody tr:odd").addClass("odd");
  3.     $("tr:eq(0)").addClass("firsttr");
可是,没有看到thead的下边框啊,如图:

然后,当然我很迷惑,发现thead这个东西啥都没效果,当时我心里就有个七八分明白了,最后为了确定,google到了一个外国人的帖子,《Why border of
and both not showing here?》,这个叫Jitendra Vyas的人也和我有同样的困惑。
接着,有人回复了,“You can't style the
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:
  1. table thead tr{
  2.     border-bottom:2px solid #000080;
  3. }
正当我要得意的时候,惨了,还是没效果:

我去,继续改:
  1. table thead th{
  2.     border-bottom:2px solid #000080;
  3. }
哎,没问题了,用th就ok,如图:
你们不觉得奇怪么?
现在我又陷入了困境,tr肯定是可见元素啊。。。
换用新的CSS:
  1. table{
  2.     width:400px;
  3.     text-align:center;
  4. }

  5. .even{
  6.     background:#c0c0c0;
  7. }
  8. .odd{
  9.     background:#a6caf0;
  10. }
  11. .firsttr{
  12.     background:#ffff00;
  13.     border:2px solid #000080;
  14. }
结果背景出来了,但border没有。
别泄气,继续查看,相关的文章都指向同一个线索:border-collapse,我把这个CSS加入:
  1. table{
  2.     width:400px;
  3.     text-align:center;
  4.     border-collapse:collapse;
  5. }
结果出来了:

再回过头来看看,border-collapse属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
在本例中,collapse就可以,而seperate就不行。其实seperate本来是想独立展示出边框的,collapse想合并隐去。怎么到这里就反过来了呢?
真的是用thead的人少,最后看到一篇这个:
《border-collapse实现表格细线边框》,是个好办法,但仍然没有解决这个thead中表现相反的问题。

谁知道,就给我留言吧。



阅读(12963) | 评论(0) | 转发(0) |
0

上一篇:

下一篇:

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册

相关文章
|
7月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
3月前
|
存储 索引
antd中table组件选中单行换样式(比如背景颜色)
在Ant Design (antd)的Table组件中,可以通过设置`onRow`属性来定义行点击事件,从而改变被点击行的样式,如背景颜色。`onRow`是一个函数,返回一个对象,对象包含事件处理函数,如`onClick`。同时,使用`rowClassName`属性来指定行的类名,结合状态管理,可以实现点击某行后改变其背景颜色的效果。具体实现时,需要在组件状态中保存当前被点击行的索引,然后通过`rowClassName`判断并返回相应的类名。
370 2
antd中table组件选中单行换样式(比如背景颜色)
|
7月前
LabVIEW 调整Table表格行高列宽的方法与例程
LabVIEW 调整Table表格行高列宽的方法与例程
405 1
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
209 1
|
JavaScript
【项目经验】elementui--table表格自定义表头及bug
elementui--table表格自定义表头及bug(避坑)
268 0
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
68 0
table怎么实现部分列固定宽度,其它列宽自适应拉伸
table怎么实现部分列固定宽度,其它列宽自适应拉伸
511 0
table怎么实现部分列固定宽度,其它列宽自适应拉伸
|
前端开发 JavaScript
CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
450 0
CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
|
Web App开发 前端开发
诡异的element-ui的table错位问题
诡异的element-ui的table错位问题