在ie(經測試IE8已經不存在此問題)中如果td標簽中沒有內容時,存在不顯示邊框的問題,最簡單的辦法就是用javacript,在文檔加載完后加入下面的JS:
var aTd=document.getElementsByTagName("td");
for(i=0;i<aTd.length;i++) {
if(aTd[i].innerHTML=="")aTd[i].innerHTML=" ";
}
當然還有別的辦法,在TD所屬的那個table用CSS也是可以的
table{ border-collapse:collapse;}
之前
總結了下如何用
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;
}
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;
empty-cells:show;
}
class="test3": 不加 border-collapse:collapse; 和 empty-cells:show; 的情況下
.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}