问题
简单来说，在Firefox下，col与colgroup基本上只能干很少的几件事情（如果你对col和colgroup不熟，可以参看一下这个地方http://www.msleft.com/htmltags/colgroup.html），可以先看一段代码：
<table style="width: 1000px; font-size: 12px;" rules="groups">
<colgroup style="border: 2px solid #000;">
<col style="border: 1px solid #ccc;" />
<col style="background: #eee;" />
<col style="font-size: 24px;" />
</colgroup>
<colgroup>
<col style="background: #eee; text-align: right; width: 200px;" />
<col style="color: #900;" />
<col style="visibility: hidden;" />
<col style="display: none;" />
</colgroup>
<tbody>
<tr>
<td>第一列：边框</td>
<td>第二列：背景</td>
<td>第三列：字体大小</td>
<td>第四列：北京和居右</td>
<td>第五列：字体颜色</td>
<td>第六列：消失</td>
<td>第七列：另一种消失</td>
</tr>
</tbody>
</table>
以
上代码是平时常见的对col的操作，在IE6下的展现和FF的展现还是有一定差别的，除了colgroup的border，col的background
以外，FF几乎其他的全都不能实现，而IE6则几乎全部能实现（除了边框）。
解决方案
显然，对于IE我们可以直接用上面的方法来干活了
而对于Firefox和Opera，我们可以使用CSS的高级选择器来干这个活，把下面的代码作为style贴到刚才的代码的head部分，看看Firefox下的效果：
table tbody tr td:first-child { border: 5px solid #ccc; }
table tbody tr td:first-child+td { background: #900; }
table tbody tr td:first-child+td+td { font-size: 24px; }
table tbody tr td:first-child+td+td+td { background: #eee; text-align: right; width: 200px; }
table tbody tr td:first-child+td+td+td+td { color: #900; }
table tbody tr td:first-child+td+td+td+td+td { visibility: hidden; }
table tbody tr td:first-child+td+td+td+td+td+td { display: none; }
顺便说一句，IE7也支持这种写法
看起来还不错，不过，如果你的表格有100列，而你要为第99列设定属性的话。。。。建议你还是直接帮class到td上去吧。
转自:http://fallenlord.blogbus.com/logs/12637041.html
posted on 2009-11-05 13:12
紫蝶∏飛揚↗ 阅读(1004)
评论(0) 编辑 收藏 所属分类:
CSS