Cellpadding en celspatiëring instellen in CSS?

In een HTML-tabel kunnen de cellpaddingen cellspacingals volgt worden ingesteld:

<table cellspacing="1" cellpadding="1">

Hoe kan hetzelfde worden bereikt met CSS?

Antwoord 1, autoriteit 100%

Basis

Om “cellpadding” in CSS te regelen, kun je eenvoudig paddinggebruiken voor tabelcellen. bijv. voor 10px van “cellpadding”:

td { 
    padding: 10px;
}

Voor “celafstand” kunt u de CSS-eigenschap border-spacingtoepassen op uw tabel. bijv. voor 10px “celafstand”:

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

Deze eigenschap maakt zelfs gescheiden horizontale en verticale afstand mogelijk, iets wat je niet zou kunnen doen met ouderwetse “celafstand”.

Problemen in IE ≤ 7

Dit werkt in bijna alle populaire browsers, behalve Internet Explorer tot en met Internet Explorer 7, waar je bijna geen geluk hebt. Ik zeg “bijna” omdat deze browsers nog steeds de eigenschap border-collapseondersteunen, die de randen van aangrenzende tabelcellen samenvoegt. Als je cellpacing probeert te elimineren (dat wil zeggen cellspacing="0"), dan zou border-collapse: collapsehetzelfde effect moeten hebben: geen spatie tussen tabelcellen. Deze ondersteuning is echter foutief, omdat het een bestaand cellspacingHTML-kenmerk op het table-element niet overschrijft.

Kortom: voor niet-Internet Explorer 5-7 browsers, border-spacinghandelt u af. Voor Internet Explorer, als uw situatie precies goed is (u wilt 0 celspatiëring en uw tabel heeft deze nog niet gedefinieerd), kunt u border-collapse: collapsegebruiken.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Opmerking: voor een goed overzicht van CSS-eigenschappen die men kan toepassen op tabellen en voor welke browsers, zie deze fantastische Quirksmode-pagina.

Antwoord 2, autoriteit 26%

Standaard

Het standaardgedrag van de browser is gelijk aan:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Stelt de hoeveelheid ruimte in tussen de inhoud van de cel en de celwand

table {border-collapse: collapse;}
td    {padding: 6px;}

Celafstand

Beheerst de ruimte tussen tabelcellen

table {border-spacing: 2px;}
td    {padding: 0px;}

Beide

table {border-spacing: 2px;}
td    {padding: 6px;}

Beide (speciaal)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Opmerking:als er border-spacingis ingesteld, geeft dit aan dat de eigenschap border-collapsevan de tabel separate.

Probeer het zelf!

Hiervindt u de oude HTML-manier om dit te bereiken.

Antwoord 3, autoriteit 10%

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Antwoord 4, autoriteit 3%

Het instellen van marges op tabelcellen heeft voor zover ik weet geen enkel effect. Het echte CSS-equivalent voor cellspacingis border-spacing– maar het werkt niet in Internet Explorer.

Je kunt border-collapse: collapsegebruiken om de celafstand betrouwbaar in te stellen op 0, zoals vermeld, maar voor elke andere waarde denk ik dat de enige manier om in meerdere browsers te werken is om de cellspacingkenmerk.

Antwoord 5, autoriteit 3%

Deze hack werkt voor Internet Explorer 6 en hoger, Google Chrome, Firefox en Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
    padding: 10px; /* cellpadding */
}

De *-declaratie is voor Internet Explorer 6 en 7, en andere browsers zullen deze correct negeren.

expression('separate', cellSpacing = '10px')retourneert 'separate', maar beide instructies worden uitgevoerd, omdat u in JavaScript meer argumenten kunt doorgeven dan verwacht en ze worden allemaal geëvalueerd.

Antwoord 6, autoriteit 2%

Voor degenen die een celafstandwaarde willen die niet nul is, de volgende CSS werkte voor mij, maar ik kan deze alleen in Firefox testen.

Zie de Quirksmode-link elders gepostvoor compatibiliteitsdetails. Het lijkt erop dat het niet werkt met oudere versies van Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Antwoord 7

De eenvoudige oplossing voor dit probleem is:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Antwoord 8

Ook, als u wilt cellspacing="0", vergeet niet om border-collapse: collapsein uw table‘ s stylesheet.

9

Wikkel de inhoud van de cel met een div en je kunt alles doen wat je wilt, maar je moet elke cel in een kolom inpakken om een ​​uniform effect te krijgen. Bijvoorbeeld om gewoon breder links en amp te worden; juiste marges:

Dus de CSS zijn,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

td { 
    padding: 20px;
}

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

table,
th,
td {
  border: 1px solid #666;
}
table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

border-collapse: collapse !important;

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

table {
  border-collapse: collapse;
}
td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-spacing: 10px;
    }
    td {
      padding: 10px;
    }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</body>
</html>

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

table {border-collapse: collapse}
table th, table td {padding: 0}

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }