問題
簡單來說，在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
紫蝶∏飛揚↗ 閱讀(1024)
評論(0) 編輯 收藏 所屬分類:
CSS