5

在此处输入图像描述

我正在创建一个包含 5 张图像的表格，每个单元格中一张。我希望它跨越 920 像素，每个单元格之间有 10 像素的间隙。每个单元格等于 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;
}

你可以在我附加的图片中看到。每个单元格的右侧都有这个空白区域。我认为 cell-padding 和 cell-spacing 会解决它，但它没有。即使 td 设置 176px 的宽度也不起作用。我究竟做错了什么？有没有更好的方法？

4

3 回答 3

6

你需要cellpadding和cellspacing在表标签

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

演示

于 2013-04-12T10:47:38.187 回答
4

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

<!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>
于 2013-04-12T11:13:38.253 回答
1

cell-spacing并且cell-padding不存在于 CSS 中。

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

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因为表格无论如何都会与图像的总和一样宽。

于 2013-04-12T10:54:42.067 回答