在ie（經(jīng)測(cè)試IE8已經(jīng)不存在此問(wèn)題）中如果td標(biāo)簽中沒(méi)有內(nèi)容時(shí)，存在不顯示邊框的問(wèn)題，最簡(jiǎn)單的辦法就是用javacript，在文檔加載完后加入下面的JS：
var aTd=document.getElementsByTagName("td");
for(i=0;i<aTd.length;i++) {
if(aTd[i].innerHTML=="")aTd[i].innerHTML=" ";
}
當(dāng)然還有別的辦法，在TD所屬的那個(gè)table用CSS也是可以的
table{ border-collapse:collapse;}
之前
總結(jié)了下如何用
css 來(lái)實(shí)現(xiàn) table 的 border + bordercolordark + bordercolorlight
的邊框明暗效果，然后有網(wǎng)友問(wèn)我為什么他寫了一個(gè)類似的 css 樣式，但只能在 Opera 下正常看到表格的邊框效果， IE 下則什么也沒(méi)有。
于是我跑去下了個(gè) Opera9 一看，確實(shí)如此。原因倒也不復(fù)雜：因?yàn)樵?IE 下（ Firefox 似乎和 IE 一致）如果某個(gè) td
的內(nèi)容為空的話，即便你設(shè)置了高度和寬度，這個(gè) cell 的邊框樣式也是不會(huì)被顯示出來(lái)的； Opera
則不管是否有內(nèi)容與否，一概應(yīng)用樣式來(lái)渲染。這個(gè)問(wèn)題剛畢業(yè)那會(huì)就碰到了，當(dāng)時(shí)部門的科長(zhǎng)來(lái)問(wèn)我，后來(lái)我跟他說(shuō)：給每個(gè)空的 td 加上
就行了。以后每次碰到這個(gè)問(wèn)題，我就統(tǒng)統(tǒng)采用這個(gè)簡(jiǎn)單粗暴有效的方式來(lái)解決了。
但今天卯足了勁研究了幾下，從 Jiarry 那知道原來(lái) css 語(yǔ)法是允許我們對(duì)這些缺省行為進(jìn)行改變的：使用 border-collapse:collapse; 和 empty-cells:show; 就可以讓消失的邊框顯現(xiàn)出來(lái)。
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 |
這兒有內(nèi)容 |
|
|
|
| 這兒有內(nèi)容 |
|
|
|
|
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;
}
| class2 |
這兒有內(nèi)容 |
|
|
|
| 這兒有內(nèi)容 |
|
|
|
|
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;
}
| class3 |
這兒有內(nèi)容 |
|
|
|
| 這兒有內(nèi)容 |
|
|
|
|