在http://www.pmob.co.uk/faqcss/index.htm看到以下的代码,是用css的方法给表格的单元格加边框,
<style type="text/css" media="screen">
.tableborder {
border:1px ridge #FF0000;
border-color: #FF0000 #00FF00 #FFFF00 #00FFFF;
}
</style>
And apply it to your tables in the body of the document:
<table class="tableborder" >
<tr>
<td>Hello look at my border</td>
</tr>
</table>
正好看到了border-collapse这个属性, 查看css 手册,有下面一段代码来讲解这些属性的.
<style>
#idCodeDiv{width:80%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
with (document.all("idSel")) var sValue=options[selectedIndex].value;
if (sValue!="null") {
document.all("idTable").style.borderCollapse=sValue;
oCodeDiv.innerText="border-collapse : "+sValue+";";
}
}
</script>
<table id=idTable width=100% height=70 bgcolor=#FF6633>
<tr><td bgcolor=#999999 rowspan=2> </td><td bgcolor=#999999> </td><td bgcolor=#999999> </td></tr>
<tr><td bgcolor=#999999> </td><td bgcolor=#999999 colspan=2> </td></tr>
</table>
<br>
<select id="idSel" οnchange="rdl_change();">
<option value="null">---请选择参数---
<option value="collapse">collapse
<option value="separate">separate
</select>
<br>
<div id=idCodeDiv>border-collapse : separate ;</div>
记录下.顺便把 说明 也贴过来了.
separate | : | 默认值。边框独立(标准HTML) |
collapse | : | 相邻边被合并 |
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。