Zusätzliche Leerzeichen in Zellen

Bin ich eine Tabelle erstellen mit 5 Bildern auf, die in jeder Zelle.
Ich will es span 920px, mit 10px Abstand zwischen den einzelnen Zellen.
Das entspricht 176 für jede Zelle, also machte ich mich auf Bilder 176px breit.

Dies ist mein html und 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;
}

Können Sie sehen, in meinem angehängten Bild. dass es in diesem weißen Raum auf der rechten Seite im inneren jeder Zelle.
Ich dachte cell-padding und cell-spacing beheben würde, Tat er aber nicht. Sogar ein td-set Breite von 176px hat nicht funktioniert. Was mache ich falsch? Gibt es eine bessere Methode?

InformationsquelleAutor Adam G | 2013-04-12

Müssen Sie die Werte für padding, margin und border explizit. Werfen Sie einen Blick auf die korrigierten code unten:

<!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>

Also warum funktioniert das Angekreuzt, wie die Antwort, keine Erklärung, warum?
Da die Zellen der Tabelle (td) werden explizit zugewiesen padding, margin und border.
Ich bin mir bewusst, es war mehr eine prod für Sie zu aktualisieren Sie Ihre Antwort, dies zu erklären, statt nur dabei jemand elses job für Sie, wenn auch diskret

InformationsquelleAutor Michael Besteck

4

Müssen Sie cellpadding und cellspacing im table-tag
```
<table cellpadding="0" cellspacing="0">
```
DEMO

Cheers buddy! Weitere Fragen um mein problem zu lösen gleichmäßig Abstand Sie die Bilder. Es gibt noch ein extra paar Pixel, auf der rechten Seite Abb. Ich denke, seine weil ich brauche img-4 und Abb 5 Angleichung der rechts. Dann vielleicht die Mitte-img (img3) ausrichten center. Macht das Sinn? Gibt es eine einfache Möglichkeit dieses Problem zu beheben? Sorry!!!
Ich bin nicht in der Lage, um zu sehen, die Räume zwischen den Bildern coz wir haben keine Bild-link oder Breite des Bildes. Entweder Bild-link oder dimension
Nur der Hinweis, beide cellspacing und cellpadding veraltet in HTML5.
postimg.org/image/85jzezwdf - <-- hier ist das Bild. das Licht Grau-das sind die Bilder. das dunkle Grau ist die Tabelle im hintergrund.

InformationsquelleAutor Sowmya
1

cell-spacing und cell-padding existiert nicht in CSS.

Für das, was Sie zu erreichen versuchen, die Sie verwenden können:
```
border-spacing: 10px; 
```
Hier ist eine demo: http://jsfiddle.net/Town/7Gkxr/

und
```
padding: 0 //applied to your td elements, gives you the equivalent of cellpadding="0"
```
Gibt es eine bestehende Frage auf, SO etwa diese: Setzen Sie cellpadding und cellspacing in CSS?

Auch, wie Sie Ihre Tabelle enthält Bilder, die würde ich entfernen Sie die width-Einstellungen für table und td wie aus der Tabelle wird so breit sein wie die Summe der Bilder sowieso.

Ja, aber ich brauche Abstand zwischen meinen Bildern. Ich möchte das Bild Links Recht Links gegen die Wand. und das Rechte Bild rechts againgst der rechten Wand. Mit 10-facher Abstand zwischen jedem img
Ah, Entschuldigung - hab ich aktualisiert, es zu verwenden border-spacing statt.

InformationsquelleAutor Town

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.