之前總結了下如何用css 來實現table 的border bordercolordark bordercolorlight 的邊框明暗效果，然後有網友問我為什麼他寫了一個類似的css 樣式，但只能在Opera 下正常看到表格的邊框效果， IE 下則什麼也沒有。
下了個 Opera9 一看，確實如此。原因倒也不複雜：因為在IE 下（ Firefox 似乎和IE 一致）如果某個td 的內容為空的話，即便你設定了高度和寬度，這個cell 的邊框樣式也是不會被顯示出來的； Opera 則不管是否有內容與否，一概應用樣式來渲染。這個問題剛畢業那會就碰到了，當時部門的科長來問我，後來我跟他說：給每個空的 td 加上 就行了。以後每次碰到這個問題，我就統統採用這個簡單粗暴有效的方式來解決了。
但今天卯足了勁研究了幾下，從Jiarry 那知道原來css 語法是允許我們對這些缺省行為進行改變的：使用border-collapse:collapse; 和empty-cells:show; 就可以讓消失的邊框顯現出來。
class="test1": 加border-collapse:collapse;
.test1{
border:1px solid #999999;
border-collapse:collapse;
width:60%
}
.test1 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}
class1 這兒有內容
}
class1 這兒有內容。 >這裡有內容
class="test2": 加border-collapse:collapse; 和empty-cells:show;
.test2{
border:1px solid black;
border-collapse:collapse ;
width:60%
}
.test2 td{
border-bottom:1px solid black;
height:28px;
padding-left:6px; -cells:show;
}
class2 這兒有內容
這兒有內容
class="test3": 不加border-collapse:collapse; 和empty-cells:show; 的情況下
.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1pxsolid #9999999; 28px;
padding-left:6px;
}
class3 這兒有內容
這兒有內容
