使用CSS去除表格默认样式的间距

还是网页设计的问题,这次遇到的是表格填充和间距的问题,我们使用DW添加表格后,会发现表格有默认的填充和间距,如下图所示:

使用DW属性面板里面的设置可以轻松为我们解决这个问题,先选中表格,

然后将这两属性都设置为0,表格的填充和间距都去掉了,对应代码和截图如下:
<table width="300px" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
很明显,代码中的cellpadding="0" cellspacing="0"分别控制表格单元的填补和间距.

确实很完美,可是,如果要你使用CSS样式表来实现同样功能会怎么样呢?
先来写两个类
<style type="text/css">
.style-table
{
border:0px;
border-collapse: collapse;
}
.style-table  td,th{
   padding: 0;
}
</style>
然后我们将这样式表套用到表格中,貌似没发生什么变化,如下图:


>.<
但是我们用浏览器看看呢,一片白茫茫的,唉

我还有法子呢,用它来拼图,有没缝隙一目了然,我找了我做网站的板块图,当然是已经切好了的,

在DW中还是看得有缝隙,再用浏览器看看,居然完美的拼起来了^_^


这虽然是小问题,但还是挺有有意义的,至少可以解决表格排版的问题!

转载于:https://www.cnblogs.com/crid/archive/2010/11/28/5172748.html