免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1752 | 回复: 0

为Table中的thead加上边框,竟然头疼 [复制链接]

论坛徽章:
2
IT运维版块每日发帖之星
日期:2015-06-26 22:20:00IT运维版块每日发帖之星
日期:2015-06-29 22:20:00
发表于 2011-12-23 02:43 |显示全部楼层
出发点其实很简单,就是想做个这样的表:

所以就先架构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 <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:
  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中表现相反的问题。

谁知道,就给我留言吧。



您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

SACC2019中国系统架构师大会

【数字转型 架构演进】SACC2019中国系统架构师大会,8.5折限时优惠重磅来袭!
2019年10月31日~11月2日第11届中国系统架构师大会(SACC2019)将在北京隆重召开。四大主线并行的演讲模式,1个主会场、20个技术专场、超千人参与的会议规模,100+来自互联网、金融、制造业、电商等领域的嘉宾阵容,将为广大参会者提供一场最具价值的技术交流盛会。

限时8.5折扣期:2019年9月30日前


----------------------------------------

大会官网>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@it168.com
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP