当前位置: 代码迷 >> HTML/CSS >> style="border-collapse:collapse"的疑问解决思路
  详细解决方案

style="border-collapse:collapse"的疑问解决思路

热度:655   发布时间:2012-03-09 21:42:54.0
style="border-collapse:collapse"的疑问
border-collapse的实现,在ie和firefox下效果并不相同。

在ie下,border-collapse只是将table里,与table的四个外边框相接的 td的相接的部分的边框 去掉了。其它的td的边框,不变,不会合并。
在firefox下,border-collapse将所有的td间的cellspacing去掉了,也就是说,有border-collapse,有cellspacing时,cellspacing是没有用的,都相当于0。这就是所谓的边框合并。

是这样的吧?感觉弄得有点晕了

使用下面的表格来测试:
<table width="300" style="border-collapse:collapse" border="10" cellpadding="0" cellspacing="20" bordercolor="#FF0000" >
  <tr>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  </tr>
  <tr>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  </tr>
  <tr>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  </tr>
</table>

------解决方案--------------------
在页面前面加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

即可实现浏览器的统一
  相关解决方案