it-swarm.com.de

Abstand zwischen zwei Zeilen in einer Tabelle?

Ist das über CSS möglich?

Ich versuche

tr.classname {
  border-spacing: 5em;
}

umsonst. Vielleicht mache ich etwas falsch?

725
Marin

Sie müssen für Ihre td -Elemente Auffüllungen verwenden. So etwas sollte den Trick machen. Sie können natürlich das gleiche Ergebnis erzielen, wenn Sie eine obere Polsterung anstelle einer unteren Polsterung verwenden.

Im folgenden CSS-Code bedeutet das Größer-als-Zeichen, dass der Abstand nur auf td Elemente angewendet wird, die direkte untergeordnete Elemente zu tr Elementen mit der Klasse spaceUnder sind. Dadurch können verschachtelte Tabellen verwendet werden. (Zelle C und D im Beispielcode.) Ich bin mir bezüglich der Browserunterstützung für die direkte untergeordnete Auswahl nicht sicher (denken Sie an IE 6), aber es sollte den Code in modernen Browsern nicht beschädigen.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Dies sollte ungefähr so ​​aussehen:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+
508
Jan Aagaard

Versuchen Sie in der übergeordneten Tabelle die Einstellung

border-collapse:separate; 
border-spacing:5em;

Plus eine Grenzerklärung, und sehen Sie, ob dies Ihren gewünschten Effekt erzielt. Beachten Sie jedoch, dass IE das Modell "Separated Borders" nicht unterstützt.

360
user37731

Sie haben eine Tabelle mit ID-Alben mit beliebigen Daten ... Ich habe die trs und tds weggelassen

<table id="albums" cellspacing="0">       
</table>

In der CSS:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}
179

da ich ein Hintergrundbild hinter dem Tisch habe, würde es nicht funktionieren, es mit weißen Polstern zu fälschen. Ich habe mich dafür entschieden, zwischen jede Inhaltszeile eine leere Zeile zu setzen:

<tr class="spacer"><td></td></tr>

verwenden Sie dann CSS, um den Abstandhalterreihen eine bestimmte Höhe und einen transparenten Hintergrund zu geben.

126
Coleman

aus dem Mozilla Developer Network :

Die CSS-Eigenschaft für den Randabstand gibt den Abstand zwischen den Rändern benachbarter Zellen an (nur für das Modell mit getrennten Rändern). Dies entspricht dem cellspacing-Attribut in Präsentations-HTML , aber ein optionaler zweiter Wert kann verwendet werden, um unterschiedliche horizontale und vertikale Abstände festzulegen.

Dieser letzte Teil wird oft übersehen. Beispiel:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

UPDATE

Ich verstehe jetzt, dass das OP bestimmte, separate Zeilen mit größerem Abstand haben möchte. Ich habe ein Setup mit tbody Elementen hinzugefügt, das dies ermöglicht, ohne die Semantik zu ruinieren. Ich bin mir jedoch nicht sicher, ob es von allen Browsern unterstützt wird. Ich habe es in Chrome gemacht.

Das folgende Beispiel zeigt, wie Sie es aussehen lassen können, als ob die Tabelle aus getrennten Zeilen besteht, eine ausgewachsene CSS-Süße. Verleiht der ersten Zeile beim Setup von tbody auch mehr Abstand. Fühlen Sie sich frei zu benutzen!

Support-Hinweis: IE8 +, Chrome, Firefox, Safari, Opera 4 +

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>
69
Justus Romijn

Sie können versuchen, eine Trennzeile hinzuzufügen:

html:

<tr class="separator" />

cSS:

table tr.separator { height: 10px; }
53
Denis

Sie können den Rand einer Tabellenzelle nicht ändern. Sie können jedoch die Polsterung ändern. Ändern Sie die Polsterung des TD, wodurch die Zelle größer wird, und schieben Sie den Text mit der vergrößerten Polsterung von der Seite weg. Wenn Sie jedoch Grenzlinien haben, ist dies immer noch nicht genau das, was Sie wollen.

47
Robert C. Barth

Sie müssen border-collapse: separate; auf dem Tisch einstellen; Die meisten Standard-Stylesheets des Browsers beginnen mit border-collapse: collapse;, wodurch der Randabstand eingestellt wird.

Auch der Randabstand gilt für TD, nicht für TR.

Versuchen:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
20
John Haugeland

Ok, das kannst du tun

tr.classname td {background-color:red; border-bottom: 5em solid white}

Stellen Sie sicher, dass die Hintergrundfarbe nicht auf die Zeile, sondern auf das TD eingestellt ist. Dies sollte in den meisten Browsern funktionieren ... (Chrome, dh & ff getestet)

19
Paul

Sie können Zeilenhöhe in der Tabelle verwenden:

<table style="width: 400px; line-height:50px;">
18
alansiqueira27

Schauen Sie sich das border-collapse: separate Attribut (default) und die border-spacing Eigenschaft an.

Zuerst müssen Sie trennen sie mit Rand-Einklappen, dann können Sie Abstand zwischen Spalten und Zeilen mit Rand-Einklappen] definieren. Abstand.

Beide CSS-Eigenschaften werden von jedem Browser gut unterstützt, siehe hier .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}
<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>
17
Syno
tr { 
    display: block;
    margin-bottom: 5px;
}
13
Moe

Eine zu späte Antwort :)

Wenn Sie float auf tr -Elemente anwenden, können Sie mit dem margin -Attribut einen Abstand zwischen zwei Zeilen einhalten.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}
11
Oguzhan Ozel

Um eine Illusion des Abstands zwischen den Zeilen zu erzeugen, wenden Sie die Hintergrundfarbe auf die Zeile an und erstellen Sie dann einen dicken Rand mit weißer Farbe, sodass ein "Leerzeichen" entsteht :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}
11
Varun Natraaj

Der richtige Weg, den Abstand für Tabellen anzugeben, ist die Verwendung von Zellauffüllung und Zellabstand, z.

<table cellpadding="4">
9
Usman Zaheer

Ich bin darauf gestoßen, als ich mit einem ähnlichen Problem zu kämpfen hatte. Ich habe die Antwort von Varun Natraaj als sehr hilfreich empfunden, aber ich würde stattdessen einen transparenten Rand verwenden.

td { border: 1em solid transparent; }

Transparente Ränder haben noch Breite.

9
Thoronwen

Funktioniert für die neuesten Browser im Jahr 2015. Einfache Lösung. Es funktioniert nicht für transparent, aber im Gegensatz zu Thoronwens Antwort kann ich nicht transparent werden, um mit jeder Größe zu rendern.

    tr {
      border-bottom:5em solid white;
    }
6
FlavorScape

Setzen Sie einfach div in das td und stellen Sie die folgenden div-Stile ein:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
3
Nad

Ich erkenne, dass dies eine Antwort auf einen alten Thread ist und möglicherweise nicht die angeforderte Lösung ist, aber obwohl alle vorgeschlagenen Lösungen nicht das taten, was ich brauchte, funktionierte diese Lösung für mich.

Ich hatte 2 Tabellenzellen, eine mit Hintergrundfarbe, die andere mit einer Rahmenfarbe. Die obigen Lösungen entfernen den Rand, sodass die Zelle rechts in der Luft zu schweben scheint. Die Lösung, die den Trick gemacht hat, war, die table, tr und td durch divs und entsprechende Klassen zu ersetzen: table wäre div id="table_replacer", tr wäre div class="tr_replacer" und td wäre div class="td_replacer" (ändere natürlich auch die schließenden Tags in divs)

Um die Lösung für mein Problem zu finden, ist das CSS:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Hoffe das hilft jemandem.

2
bolvo

Hier ist eine einfache und elegante Lösung mit ein paar Einschränkungen:

  • Sie können die Lücken nicht transparent machen, sondern müssen ihnen eine bestimmte Farbe geben.
  • Sie können die Ecken der Ränder oberhalb und unterhalb der Lücken nicht abrunden
  • Sie müssen den Abstand und die Ränder Ihrer Tabellenzellen kennen

In diesem Sinne versuchen Sie Folgendes:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Was Sie tatsächlich tun, ist, einen rechteckigen ::before -Block oben in alle Zellen in der Zeile einzufügen, denen eine Lücke vorangestellt werden soll. Diese Blöcke ragen ein wenig aus den Zellen heraus, um die vorhandenen Ränder zu überlappen und sie zu verbergen. Diese Blöcke sind nur ein oberer und ein unterer Rand, die zusammengelegt sind: Der obere Rand bildet die Lücke, und der untere Rand stellt das Erscheinungsbild des ursprünglichen oberen Randes der Zellen wieder her.

Beachten Sie, dass Sie den horizontalen -ve-Rand Ihrer 'Blöcke' weiter vergrößern müssen, wenn Sie einen Rand um die Tabelle selbst sowie um die Zellen haben. Für einen 4px-Tabellenrand verwenden Sie stattdessen:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Und wenn Ihre Tabelle border-collapse:separate anstelle von border-collapse:collapse verwendet, müssen Sie (a) die gesamte Breite des Tabellenrahmens verwenden:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... und auch (b) ersetzen Sie die doppelte Breite des Rahmens, die jetzt unterhalb der Lücke erscheinen muss:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Wenn Sie möchten, können Sie die Technik problemlos an eine .gapafter-Version anpassen oder vertikale (Spalten-) Lücken anstelle von Zeilenlücken erstellen.

Hier ist ein Codepen, in dem Sie ihn in Aktion sehen können: https://codepen.io/anon/pen/agqPpW

0
Doin

Sie können die <td /> -Elemente mit <div /> -Elementen füllen und einen beliebigen Rand auf die von Ihnen gewünschten Divs anwenden. Für einen visuellen Abstand zwischen den Zeilen können Sie ein sich wiederholendes Hintergrundbild für das <tr /> -Element verwenden. (Dies war die Lösung, die ich gerade verwendet habe, und sie scheint sowohl in IE6 als auch in FireFox 3 zu funktionieren, obwohl ich sie nicht weiter getestet habe.)

Wenn Sie den Servercode nicht so ändern möchten, dass <div /> s in <td /> s eingefügt werden, können Sie jQuery (oder etwas Ähnliches) verwenden, um den <td /> -Inhalt dynamisch in ein <div/>, so dass Sie das CSS wie gewünscht anwenden können.

0
John Fisher

Oder fügen Sie einfach ein Leerzeichen mit der Höhe des Rands zwischen den Zeilen hinzu, in denen Sie den Abstand einfügen möchten

0
John Magnolia