Een tabelrij opvullen

Zo ziet de opvulling eruit. Zie hoe de td inside niet wordt beïnvloed. Wat is de oplossing?

Antwoord 1, autoriteit 100%

De truc is om opvulling te geven aan de td-elementen, maar maak een uitzondering voor de eerste (ja, het is hacky, maar soms moet je de regels van de browser volgen):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}
td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child wordt relatief goed ondersteund: https://developer .mozilla.org/en-US/docs/CSS/:first-child

Je kunt dezelfde redenering gebruiken voor de horizontale opvulling door tr:first-child tdte gebruiken.

U kunt ook de eerste kolom uitsluiten door de not-operator. De ondersteuning hiervoor is op dit moment echter niet zo goed.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Antwoord 2, autoriteit 24%

In CSS 1en CSS 2specificaties, opvulling was beschikbaar voor alle elementen, inclusief <tr>. Toch is de ondersteuning van opvulling voor table-row (<tr>) verwijderd in CSS 2.1en CSS 3 specificaties. Ik heb nooit de reden gevonden achter deze vervelende wijziging die ook van invloed is op de marge-eigenschap en een paar andere tabelelementen (koptekst, voettekst en kolommen).

Update: in februari 2015, deze threadop de [email protected]mailinglijst besproken over het toevoegen van ondersteuning van padding en border voor table-row. Dit zou het standaard boxmodel ook toepassen op tabelrij- en tabelkolomelementen. Het zou dergelijke voorbeeldentoestaan. De thread lijkt te suggereren dat ondersteuning voor het opvullen van tabelrijen nooit heeft bestaan in CSS-standaarden omdat het ingewikkelde lay-out-engines zou hebben. In het Editor’s Draftvan het CSS-basisdoosmodel van 30 september 2014 zijn opvulling en randeigenschappen voor alle elementen inclusief table-row en table-column-elementen. Als het uiteindelijk een W3C-aanbeveling wordt, kan uw html+css-voorbeeld eindelijk werken zoals bedoeld in browsers.

Antwoord 3, autoriteit 7%

Optie 1

Je zou het ook kunnen oplossen door een transparante rand toe te voegen aan de rij (tr), zoals deze

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Werkt als een tierelier, maar als je regelmatige randen nodig hebt, zal deze methode helaas niet werken.

Optie 2

Aangezien rijen fungeren als een manier om cellen te groeperen, is de juiste manier om dit te doen het gebruik van

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Antwoord 4, autoriteit 6%

geef de td opvulling

Antwoord 5

Voeg een vóór-element toe:

tr::before {
  content: "";
  margin-left: 10px;
}

Het was belangrijk voor mij in de context van ‘responsieve’ tabellen, dwz td {display: table-row; }

Antwoord 6

Je zou deze stijl gewoon aan de tabel kunnen toevoegen.

table {
    border-spacing: 15px;
}

Antwoord 7

Dit is een heel oud bericht, maar ik dacht dat ik mijn oplossing van een soortgelijk probleem dat ik onlangs tegenkwam, moet posten.

Antwoord: ik heb dit probleem opgelost door het element trweer te geven als een block-element, dwz door een CSS van display:block op te geven voor het trelement. Je kunt dit zien in het onderstaande codevoorbeeld.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.