5

ここに画像の説明を入力

各セルに 1 つずつ、合計 5 つの画像を含むテーブルを作成しています。各セル間に 10 ピクセルのギャップを設けて、920 ピクセルにまたがるようにします。これは各セルで 176 に相当するため、画像の幅を 176 ピクセルにしました。

これは私の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 で修正されると思いましたが、そうではありませんでした。176px のセット幅で td を実行しても機能しませんでした。私は何を間違っていますか？より良い方法はありますか？

4

3 に答える 3

6

cellpaddingおよびcellspacingテーブルタグに必要です

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

デモ

于 2013-04-12T10:47:38.187 に答える
4

padding、margin、border の値を明示的に設定する必要があります。以下の修正されたコードを見てください。

<!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-spacingCSSには存在しcell-paddingません。

達成しようとしているものについては、次を使用できます。

border-spacing: 10px;

ここにデモがあります：http://jsfiddle.net/Town/7Gkxr/

と

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

これについて SO に関する既存の質問があります: Set cellpadding and cellspacing in CSS?

また、テーブルには画像が含まれているため、テーブルは画像の合計と同じ幅になるためtable、 との幅設定を削除します。td

于 2013-04-12T10:54:42.067 に答える