Wie entferne ich unerwünschten Platz zwischen Zeilen und Spalten in der Tabelle?

177

Wie entferne ich den zusätzlichen Platz zwischen den Zeilen und Spalten in der Tabelle?

Ich habe versucht, den Rand, das Auffüllen und verschiedene Randeigenschaften für die Tabelle sowie für tr und td zu ändern.

Ich möchte, dass die Bilder alle direkt nebeneinander liegen und wie ein einziges großes Bild aussehen.

Wie soll ich das beheben?

CSS

table {
  border-collapse: collapse;
}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>

<body>
  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    </tr>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_03.png" /></td>
      <td><img src="images/home_04.png" /></td>
      <td><img src="images/home_05.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_07.png" /></td>
      <td><img src="images/home_06.png" /></td>
      <td><img src="images/home_08.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_09.png" /></td>
      <td><img src="images/home_10.png" /></td>
      <td><img src="images/home_11.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_12.png" /></td>
      <td><img src="images/home_13.png" /></td>
      <td><img src="images/home_14.png" /></td>
    </tr>
    <tr class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>
    </tr>
  </table>

</body>

</html>
html css html-table Zach Galant
quelle

Antworten:

84

Fügen Sie diesen CSS-Reset Ihrem CSS-Code hinzu: ( Von hier )

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Das CSS wird effektiv zurückgesetzt, wodurch das Auffüllen und die Ränder beseitigt werden.

Vectran
quelle
15
Es gibt einen Kommentar, wenn Sie sagen: / * Tabellen benötigen noch 'cellspacing = "0"' im Markup * /
easwee
2
Was passiert, wenn Sie viel CSS auf Ihrer Seite verwenden und diese nicht zurücksetzen möchten?
Sevenearths
Es ist wahrscheinlich die beste Vorgehensweise, einen Reset oder ein Framework zu verwenden und von dort aus zu erstellen. In diesem Fall müssen Sie jedoch jeden Stil zurücksetzen, d. H. Tabelle {Polsterung: 0px; Rand: 0px; Grenzkollaps: Kollaps; etc} .... Weitere Informationen finden Sie unter quirksmode.org/css/tables.html .
Vectran
Sie können viele davon überspringen, da es nur für die Tabellen ist.
Cai Haoyang
31
Dies ist übertrieben, beantwortet die Frage nicht und ist nicht einmal ein vollständiger Reset. Isolieren Sie möglicherweise den relevanten Code, erklären Sie ihn und schlagen Sie dann einen Reset vor.
Sandy Gifford
197

Hinzufügen zur Antwort von vectran: Sie müssen auch ein cellspacingAttribut für das Tabellenelement festlegen , um die Cross-Browser-Kompatibilität zu gewährleisten.

<table cellspacing="0">

BEARBEITEN (der Vollständigkeit halber erweitere ich dies 5 Jahre später :):

In Internet Explorer 6 und Internet Explorer 7 mussten Sie den Zellenabstand direkt als Tabellenattribut festlegen, da sonst der Abstand nicht verschwindet.

Internet Explorer 8 und späteren Versionen und alle anderen Versionen von gängigen Browsern - Chrome, Firefox, Opera 4+ - Unterstützung der CSS - Eigenschaft border-Abstand .

Um einen browserübergreifenden Tabellenzellenabstand zurückzusetzen (unterstützt IE6 als Dinosaurier-Browser), können Sie dem folgenden Codebeispiel folgen:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
Erweitern Sie das Snippet

easwee
quelle
68

Das hat bei mir funktioniert:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}
Pagetribe
quelle
55

Verwenden Sie für Bilder in td Folgendes für Bilder:

display: block;

Das entfernt unerwünschten Platz für mich

Jacob Bertelsen
quelle
9

Fügen Sie einfach zusätzlich zu Jacobs Antwort hinzu, denn imgin td,

body {line-height: 0;}
img {display: block; vertical-align: bottom;}

Dies funktioniert für die meisten E-Mail-Clients, einschließlich Google Mail. Aber nicht Outlook. Für Outlook müssen Sie zwei weitere Schritte ausführen:

table {border-collapse: collapse;}

und setzen Sie alle tdElemente so, dass sie die gleichen heightund widthdie darin enthaltenen Bilder haben. Beispielsweise,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>
Hexinpeter
quelle
8 
table 
{
    border-collapse: collapse;
}

reduziert alle Ränder, die die Tabellenspalten trennen ...

oder Versuche

<table cellspacing="0" style="border-spacing: 0;">

Führen Sie alle Zellenabstände auf 0 und den Randabstand auf 0 aus, um dasselbe zu erreichen.

Viel Spaß!

Aamir Shahzad
quelle
1
<table cellspacing="0" border-spacing: 0;>ist ungültiges Markup! <table cellspacing="0" style="border-spacing: 0;">wäre richtig
Dirk von Grünigen
8

Fügen Sie für standardkonformes HTML5 all dieses CSS hinzu, um den gesamten Platz zwischen Bildern in Tabellen zu entfernen:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}
total umwerfend
quelle
5

Versuche dies,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}
Rakesh Vadnal
quelle
4

Wenn Sie Cellpadding und Cellspacing auf 0 setzen, wird der unnötige Abstand zwischen Zeilen und Spalten entfernt ...

Vijay
quelle
3

Alles was ich tun musste war hinzuzufügen:

line-height: 0px;

in meinem

<tr ...>
Ángel Ramírez Isea
quelle
Es gibt andere Antworten, die die Frage des OP stellen, und sie wurden vor einiger Zeit veröffentlicht. Stellen Sie beim Posten einer Antwort sicher, dass Sie entweder eine neue Lösung oder eine wesentlich bessere Erklärung hinzufügen, insbesondere wenn Sie ältere Fragen beantworten.
help-info.de
1

Das Hinzufügen dieser Zeile am Anfang der Datei hat bei mir funktioniert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Das Ändern des CSS, um die richtigen Randeigenschaften festzulegen, funktionierte nicht, bis ich die obige Zeile hinzufügte

Albert s
quelle
Dies ist das EINZIGE, was für mich funktioniert hat! +1 und DANKE! Ich hatte es auf Strict anstatt auf Transition eingestellt.
Scott Biggs
0

Haben Sie versucht, die TRs mit einem Colspan zu entfernen und festzustellen, ob sich dadurch etwas ändert?

Ich habe erlebt, dass Colspans und Rowspans ziemlich böse sind, wenn es um genaue Tischdesigns geht. Wenn Ihre Bilder ohne die Colspan-TRs in Ordnung aussehen, würde ich von dort aus eine verschachtelte Tabellengruppe erstellen.

Auch Ihre style.css scheint nicht vollständig zu sein, vielleicht stimmt da etwas nicht? Ich würde zumindest padding: 0; margin: 0;der Tabelle (oder der Klasse "mytable") hinzufügen. Stellen Sie sicher, dass Ihre Bilder auch keine Leerzeichen und / oder Ränder haben (z. B. durch Hinzufügen img { border: 0; }zu Ihrem Stylesheet).

Select0r
quelle
Das Entfernen der TRs mit einem Colspan bewirkt nichts. Das Hinzufügen der Polsterung und des Randes bewirkt auch nichts
Zach Galant
0

Ich hatte dieses Problem und keiner der Vorschläge aus mehreren Posts hat funktioniert. Ich habe sie alle ausprobiert. Mein Problem stellte sich heraus, dass die von mir erstellte Tabelle in einer anderen Tabelle verschachtelt ist und deren Eigenschaften erbt. Ich musste die Containertabelle überschreiben.

In diesem Beispiel ist SuColTable eine Klasse in der Tabelle.

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

Der Randkollaps, der Rand: Keine und der Randabstand entfernen die Tabellen- / Zeilen- / Spaltenzeile. Die Auffüllaufrufe 0 entfernen die Auffüllung aus der Containertabelle. Ich musste! Wichtig in jeden Stil einbeziehen, damit es funktioniert, um die Container-Tabellenstile zu überschreiben.

Ich habe padding_top, left und bottom (anstatt nur padding), weil ich zwei andere Klassen habe, die padding_right steuern.

line-height: 0px;

Die Zeilenhöhe Null macht die Zeile eine Zeile hoch. Wenn Sie mehrere Zeilen haben, werden diese zu einer Zeile komprimiert.

George
quelle
-2 

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
Erweitern Sie das Snippet

Ikeanyi Kenechukwu
quelle
Es gibt andere Antworten, die die Frage des OP stellen, und sie wurden vor einiger Zeit veröffentlicht. Stellen Sie beim Posten einer Antwort sicher, dass Sie entweder eine neue Lösung oder eine wesentlich bessere Erklärung hinzufügen, insbesondere wenn Sie ältere Fragen beantworten.
help-info.de