75年生人,程序员,在西安。

table 的 cellpadding="0" cellspacing="0" 属性在CSS中定义的

table 的 cellpadding="0" cellspacing="0" 属性如何在CSS中定义
一般用户会希望生成一个像素边框的表格,早期的办法是这样的:
<style>
.tableNormal{
    background-color:#666666;
}
.tableNormal td{
    background-color:#FFFFFF;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" >
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
这样有两个不太好的地方:
一、是打印的时候将看不到表格线。
二、这样定义不太标准,没有完全将格式信息提出到CSS中。

另一种比较好的办法如下,比如下面这样的表格:其中关键是border-collapse: collapse;这一句将边框间距取消了。
<style type="text/css">
.tableNormal {
    width: 300px;
    border-collapse: collapse;
    border-width: 1px 0px 0px 1px;
    border-color: #000000;
    border-style: solid;
}
.tableNormal th {
    background-color:#EEFFCC;
    border-width: 0px 1px 1px 0px;
    border-color: #000000;
    border-style: solid;
}
.tableNormal td {
    background-color:#FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-color: #000000;
    border-style: solid;
}

</style>
<table >
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
</table>

另外,“border-collapse:separate; ” 就是将表格边框分离开的意思,相当于cellspacing 属性,而cellpadding属性当然用padding代替了。而“border-collapse:separate; ”在IE6上不支持,FireFox上表现很好,看来在CSS支持方面还是Firefox比较标准啊!

评论(1)

© 世风十三 | Powered by LOFTER