html - Spatie tussen twee rijen in een tabel?

Is dit mogelijk via CSS?

Ik probeer

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

het mocht niet baten. Misschien doe ik iets verkeerd?

Antwoord 1, autoriteit 100%

Je moet opvulling gebruiken voor je td-elementen. Zoiets zou het moeten doen. U kunt natuurlijk hetzelfde resultaat krijgen met een bovenste opvulling in plaats van een onderste opvulling.

In de onderstaande CSS-code betekent het groter-dan-teken dat de opvulling alleen wordt toegepast op td-elementen die onderliggende elementen zijn naar tr-elementen met de klasse spaceUnder. Dit maakt het mogelijk om geneste tabellen te gebruiken. (Cel C en D in de voorbeeldcode.) Ik ben niet zo zeker van browserondersteuning voor de directe kindselector (denk aan IE 6), maar het zou de code in geen enkele moderne browser moeten breken.

/* 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>

Antwoord 2, autoriteit 80%

Probeer in de bovenliggende tabel

. in te stellen

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

Plus een grensverklaring en kijk of dit het gewenste effect bereikt.
Pas op, dat wil zeggen niet het model “gescheiden randen” ondersteunt.

3, Autoriteit 36%

U hebt een tabel met ID-albums met alle gegevens … Ik heb de TRS en TDS

weggelaten

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

In de CSS:

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

4, Autoriteit 26%

Omdat ik een achtergrondafbeelding achter de tafel heb, zou het faken met witte vulling niet werken. Ik heb ervoor gekozen om een lege rij tussen elke rij van inhoud te plaatsen:

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

Gebruik vervolgens CSS om de spacer-rijen een bepaalde hoogte en transparante achtergrond te geven.

5, Autoriteit 15%

van Mozilla Developer Network :

De grensafstand CSS-eigenschap specificeert de afstand tussen de grenzen van aangrenzende cellen (alleen voor het gescheiden bordermodel). Dit komt overeen met het kenmerk Celspacing in Presentational HTML, , maar een optionele tweede waarde kan worden gebruikt om verschillende horizontale en verticale afstand in te stellen.

Dat laatste deel is vaak toezicht. Voorbeeld:

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

UPDATE

Ik begrijp nu dat het OP wil dat specifieke, afzonderlijke rijen meer ruimte hebben. Ik heb een setup met tbody-elementen toegevoegd die dat voor elkaar krijgt zonder de semantiek te verpesten. Ik weet echter niet zeker of het door alle browsers wordt ondersteund. Ik heb het gemaakt in Chrome.

Het onderstaande voorbeeld is om te laten zien hoe je het eruit kunt laten zien alsof de tabel uit afzonderlijke rijen bestaat, volledige css-zoetheid. Ook gaf de eerste rij meer ruimte met de tbodysetup. Voel je vrij om te gebruiken!

Ondersteuning: 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>

Antwoord 6, autoriteit 10%

U kunt proberen een scheidingsrij toe te voegen:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Antwoord 7, autoriteit 9%

Je kunt de marge van een tabelcel niet wijzigen. Maar je KUNT de opvulling veranderen. Wijzig de opvulling van de TD, waardoor de cel groter wordt en de tekst wegduwt van de zijkant met de verhoogde opvulling. Als je echter grenslijnen hebt, is het nog steeds niet precies wat je wilt.

Antwoord 8, autoriteit 7%

Bekijk de border-collapse: apartattribuut (standaard) en de eigenschap border-spacingeigenschap.

Eerst moet je ze scheidenmet border-collapse, daarna kun je de ruimte tussen kolommen en rijendefiniëren met randafstand.

Beide CSS-eigenschappen worden in feite goed ondersteund in elke browser, zie 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>

Antwoord 9, autoriteit 4%

Je moet border-collapse: separate;instellen op de tafel; de meeste standaard stylesheets van de browser beginnen bij border-collapse: collapse;, waarmee de afstand tussen de randen wordt weggelaten.

Ook grensafstand: gaat op de td, niet op de tr.

Probeer:

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

10, Autoriteit 4%

OK, u kunt

doen

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

Zorg ervoor dat de achtergrondkleur op de TD is ingesteld in plaats van de rij. Dit zou in de meeste browsers moeten werken … (Chrome, IE & AMP; FF getest)

11, Autoriteit 4%

U kunt Line-hoogte in de tabel gebruiken:

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

12, Autoriteit 2%

tr { 
    display: block;
    margin-bottom: 5px;
}

13, Autoriteit 2%

Een te late antwoord 🙂

Als u float op tr–elementen toepast, kunt u ruimte tussen twee rijen met marginattribuut.

table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}

14, Autoriteit 2%

Voor het creëren van een illusie van de afstand tussen rijen, breng achtergrondkleur op rij en maak vervolgens een dikke rand met witte kleur zodat een “spatie” is gemaakt 🙂

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

15, Autoriteit 2%

De juiste manier om afstand te geven voor tabellen is om cellpadding en celspacing te gebruiken, b.v.

<table cellpadding="4">

16, Autoriteit 2%

Ik kwam dit tegen terwijl ik worstelde met een soortgelijk probleem. Ik vond het antwoord van Varun Natraaj heel nuttig, maar ik zou in plaats daarvan een transparante rand gebruiken.

td { border: 1em solid transparent; }

Transparante randen hebben nog steeds breedte.

Antwoord 17

Werkt voor de meeste nieuwste browsers in 2015. Eenvoudige oplossing. Het werkt niet voor transparant, maar in tegenstelling tot het antwoord van Thoronwen, kan ik het niet transparant krijgen om met elk formaat weer te geven.

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

Antwoord 18

Plaats divin de tden stel de volgende stijlen van divin:

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

Antwoord 19

De beste manier is om <td>toe te voegen met een heightattribuut:

<td height="50" colspan="2"></td>

Je kunt hier meer lezen over colspan.

In het volgende voorbeeld is onze tabelgroenen onze tdmet het kenmerk heightis geel:

<table style="background-color: green">
    <tr>
        <td>
            <span>Lorem</span>
        </td>
        <td>
            <span>Ipsum</span>
        </td>
    </tr>
    <tr>
        <td height="50" colspan="2" style="background-color: yellow"></td>
    </tr>
    <tr>
        <td>
            <span>Sit</span>
        </td>
        <td>
            <span>Amet</span>
        </td>
    </tr>
</table>

Antwoord 20

Ik realiseer me dat dit een antwoord is op een oude thread en misschien niet de gevraagde oplossing is, maar hoewel alle voorgestelde oplossingen niet deden wat ik nodig had, werkte deze oplossing voor mij.

Ik had 2 tabelcellen, één met achtergrondkleur en de andere met een randkleur. De bovenstaande oplossingen verwijderen de rand, zodat de cel aan de rechterkant in de lucht lijkt te zweven.
De oplossing die het deed, was om de table, tren tdte vervangen door divs en bijbehorende klassen: de tabel zou div id="table_replacer", tr zou div class="tr_replacer"zijn en td zou div class="td_replacer"zijn (verander ook afsluittags in divs uiteraard)

Om de oplossing voor mijn probleem te krijgen, is de 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;}

Ik hoop dat dit iemand helpt.

Antwoord 21

U kunt de <td/> elementen met <div/> elementen, en pas elke marge toe op die divs die je leuk vindt. Voor een visuele ruimte tussen de rijen kunt u een herhalende achtergrondafbeelding gebruiken op de <tr/> element. (Dit was de oplossing die ik zojuist heb gebruikt, en het lijkt te werken in zowel IE6 als FireFox 3, hoewel ik het niet verder heb getest.)

Als u uw servercode niet wilt wijzigen om <div/>s in de <td/>s te plaatsen, kunt u ook jQuery (of iets dergelijks) gebruiken om de <td dynamisch in te pakken /> inhoud in een <div/>, zodat u de CSS naar wens kunt toepassen.

Antwoord 22

Of voeg gewoon een spatie toe met de hoogte van de marge tussen de rijen die u wilt toevoegen

23

Hier werkt dit soepel:

#myOwnTable td { padding: 6px 0 6px 0;}

Ik veronderstel dat je een meer fijnkorrelige lay-out kunt trainen door op te geven welke TD indien nodig is.

24

Hier boven aangegeven …

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }

Verwijdert de uitlijning van de verticale kolom, dus wees voorzichtig hoe u het gebruikt

25

Heb je geprobeerd:

tr.classname { margin-bottom:5em; }

Als alternatief kan elke TD ook worden aangepast:

td.classname { margin-bottom:5em; }

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

Previous articleVerwijder alle X-asetiketten in GGPLOT [DUPLICEER]

Next articleJava.lang.classcastException

Spatie tussen twee rijen in een tabel?