出发点其实很简单，就是想做个这样的表：
阅读(12963) | 评论(0) | 转发(0) |
所以就先架构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
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：
- 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中表现相反的问题。
谁知道，就给我留言吧。
