CSS: Wie erstelle ich eine Lücke zwischen Zeilen in einer Tabelle?

Das bedeutet, dass die resultierende Tabelle weniger so aussieht:

[=== ROW ===]
[=== ROW ===]
[=== ROW ===]
[=== ROW ===]

... und mehr davon:

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

Ich habe versucht hinzuzufügen

margin-bottom:1em;

zu td und tr bekam aber nichts. Irgendwelche Ideen?

Alles was du brauchst:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Dies setzt voraus, dass Sie eine vertikale Lücke von 1em und keine horizontale Lücke wünschen. Wenn Sie dies tun, sollten Sie sich wahrscheinlich auch mit der Steuerung Ihrer Zeilenhöhe befassen.

Seltsam, dass einige der Antworten, die die Leute gaben, einen Grenzkollaps beinhalten: Kollaps, dessen Wirkung genau das Gegenteil von dem ist, wonach die Frage gefragt hat.

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

Die Zellen reagieren auf nichts, es sei denn, Sie legen zuerst den Randkollaps fest. Sie können TR-Elementen auch Ränder hinzufügen, sobald dies festgelegt ist (unter anderem).

Wenn dies für das Layout gilt, würde ich DIVs und aktuellere Layouttechniken verwenden. Wenn es sich jedoch um tabellarische Daten handelt, sollten Sie sich selbst ausschalten. Ich verwende immer noch Tabellen in meinen Webanwendungen für Daten.

Wenn keine der anderen Antworten zufriedenstellend ist, können Sie jederzeit eine leere Zeile erstellen und diese mit CSS entsprechend formatieren, um transparent zu sein.

Wenn Sie keine Ränder haben oder Ränder haben und den Abstand innerhalb der Zellen möchten, können Sie paddingoder verwenden line-height. Soweit ich weiß, hat der Rand keinen Einfluss auf Zellen und Zeilen.
Eine CSS-Eigenschaft für den Abstand von Zellen ist border-spacing, funktioniert jedoch nicht in IE6 / 7 (Sie können sie also abhängig von Ihrer Menge verwenden).

Wenn alles andere fehlschlägt, können Sie das alte cellspacingAttribut in Ihrem Markup verwenden - dies gibt Ihnen jedoch auch einen Abstand zwischen den Spalten. Einige CSS-Resets empfehlen, dass Sie es trotzdem einstellen, um browserübergreifende Unterstützung zu erhalten:

/ * Tabellen müssen noch cellspacing="0"im Markup * /

Dies ist der Weg (ich dachte, es ist unmöglich):

Geben Sie der Tabelle zunächst nur den vertikalen Randabstand (z. B. 5 Pixel) und setzen Sie den horizontalen Randabstand auf 0. Dann sollten Sie jeder Zeilenzelle den richtigen Rand geben. Zum Beispiel sollte die Zelle ganz rechts in jeder Zeile oben, unten und rechts einen Rand haben. Die Zellen ganz links sollten oben, unten und links einen Rand haben. Und die anderen Zellen zwischen diesen beiden sollten nur oben und unten einen Rand haben. Wie dieses Beispiel:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Meiner Meinung nach ist es am einfachsten, Ihrem Tag Polster hinzuzufügen.

td {
 padding: 10px 0
}

Hoffe das wird dir helfen! Jubeln!

Sie können einfach padding-topund padding-bottomauf einem tdElement verwenden.

Einheit kann alles aus dieser Liste:

Demo-Code:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Das Auffüllen im TD funktioniert, wenn der Raum dieselbe Hintergrundfarbe wie der td haben soll

In meinem Fall war ein Leerraum zwischen der Kopfzeile und dem, was darüber lag, erforderlich

Durch Anwenden dieses Stils auf eine einzelne Zelle konnte ich die gewünschte Trennung erzielen. Es war nicht notwendig, es allen Zellen hinzuzufügen ... Wohl nicht die eleganteste, aber möglicherweise eleganter als Trennzeilen.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Wenn Sie sich an das Design mit Tabellen halten, ist es am besten, eine leere Zeile ohne Inhalt und mit der angegebenen Höhe zwischen den einzelnen Zeilen in der Tabelle anzugeben.

Sie können div verwenden, um diese Komplexität zu vermeiden. Geben Sie jedem Div einfach einen Spielraum.

Sie können auch einfach die Höhe für jede Zeile mithilfe von CSS ändern.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Sie können auch die Höhe des <td>Elements ändern. Es sollte das gleiche Ergebnis liefern.

Erstellen Sie eine weitere <tr>direkt darunter und fügen Sie dem Inhalt von etwas Platz oder Höhe hinzu<td>

Kasse zum Beispiel die Geige

https://jsfiddle.net/jd_dev777/wx63norf/9/

Fügen Sie tr die folgende Regel hinzu und es sollte funktionieren

float: left

Beispiel (Öffnen Sie es in IE9 offcourse :)): http://jsfiddle.net/zshmN/

BEARBEITEN: Dies ist keine legale oder korrekte Lösung, wie von vielen hervorgehoben, aber wenn Sie keine Option mehr haben und etwas benötigen, funktioniert dies in IE9.

Also alle, die Stimmen abgeben, teilen Sie uns bitte auch die richtige Lösung mit