Question

enter image description here

我正在创建一个包含5个图像的表，每个单元格中有一个。我希望它跨越920px，每个单元格之间有10px的间隙。每个单元格相当于176，所以我的图像宽度为176px。

这是我的HTML和CSS：

    <table>
    <tr>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Three"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Four"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Five"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
</table>



table {
    width:100%;
    cell-padding:"0";
    cell-spacing:"0";
    margin:0;
    border:none;
}

td {
    width:176px;
}

您可以在我的附件中看到。每个细胞内右侧都有这个白色空间。我认为细胞填充和细胞间距会修复它，但事实并非如此。甚至做一套176px的套装也行不通。我究竟做错了什么？有更好的方法吗？

Answer 1

表格标记

中需要cellpadding和cellspacing

<table cellpadding="0" cellspacing="0">

<强> DEMO

Answer 2

您需要明确设置填充，边距和边框的值。看看下面更正后的代码：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      table {
        width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        border-collapse: collapse;
      }

      td {
        width: 176px;
        padding: 0 10px 0 0;
        margin: 0;
        border: 0;
      }
      td.last {
        padding: 0;
        margin: 0;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div id="imageContainer" style="width: 920px; margin: 0; padding: 0; border: 0;">
      <table>
        <tr>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Three"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Four"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td class="last">
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Five"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Answer 3

CSS中不存在

cell-spacing和cell-padding。

对于您要实现的目标，您可以使用：

border-spacing: 10px;

以下是演示：http://jsfiddle.net/Town/7Gkxr/

和

padding: 0 // applied to your td elements, gives you the equivalent of cellpadding="0"

关于此问题，现在存在一个问题：Set cellpadding and cellspacing in CSS?

此外，由于您的表格中包含图片，因此我会删除table和td的宽度设置，因为该表格的宽度与图片的总和一样宽。

表格单元格上的额外空白区域

3 个答案: