Vraag Stel cellpadding en cellspacing in CSS in?


In een HTML-tabel, de cellpadding en cellspacing kan als volgt worden ingesteld:

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

Hoe kan hetzelfde worden bereikt met behulp van CSS?


2922
2017-12-04 08:45


oorsprong


antwoorden:


Basics

Voor het beheren van "cellpadding" in CSS, kunt u eenvoudigweg gebruiken padding op tafelcellen. Bijv. voor 10px van "cellpadding":

td { 
    padding: 10px;
}

Voor "cellspacing", kunt u de border-spacing CSS-eigenschap aan uw tabel. Bijv. voor 10px van "cellspacing":

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

Deze eigenschap laat zelfs een afzonderlijke horizontale en verticale afstand toe, iets wat je niet zou kunnen doen met old-school "cellspacing".

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 border-collapse eigenschap, waarbij de randen van aangrenzende tabelcellen worden samengevoegd. Als u cellspacing probeert te elimineren (dat wil zeggen, cellspacing="0") dan border-collapse:collapse zou hetzelfde effect moeten hebben: geen spatie tussen tabelcellen. Deze ondersteuning is echter buggy, omdat deze een bestaande niet overschrijft cellspacing HTML-kenmerk op het tabelelement.

Kortom: voor niet-Internet Explorer 5-7 browsers, border-spacing behandelt je. Voor Internet Explorer, als uw situatie precies goed is (u wilt 0 cellspacing en uw tabel heeft dit nog niet), kunt u gebruiken border-collapse:collapse.

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

Opmerking: bekijk dit voor een goed overzicht van CSS-eigenschappen die u kunt toepassen op tabellen en voor welke browsers fantastische Quirksmode-pagina.


3226
2017-07-09 02:34



Standaard

Het standaardgedrag van de browser is gelijk aan:

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

enter image description here

cellpadding

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

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

enter image description here

cellspacing

Bepaalt de ruimte tussen tabelcellen

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

enter image description here

Beide

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

enter image description here

Beide (speciaal)

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

enter image description here

Notitie: Als dat zo is border-spacing ingesteld, geeft dit aan border-collapse eigendom van de tafel is separate.

Probeer het zelf!

Hier je kunt de oude HTML-manier vinden om dit te bereiken.


849
2018-06-12 10:24



table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



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

Je kunt gebruiken border-collapse: collapse om de celafstand op betrouwbare wijze in te stellen op 0, zoals gezegd, maar voor elke andere waarde is de enige manier om de browser te gebruiken de cellspacing attribuut.


104
2017-12-04 09:18



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 * verklaring is voor Internet Explorer 6 en 7, en andere browsers zullen het op de juiste manier negeren.

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


84
2017-12-05 04:30



Voor diegenen die een niet-nulwaarde voor cellspacing willen, werkte de volgende CSS voor mij, maar ik kan deze alleen in Firefox testen. Zie de Quirksmode link elders gepost voor compatibiliteitsdetails. Het lijkt erop dat het misschien niet werkt met oudere versies van Internet Explorer.

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

61
2017-08-20 03:32



De eenvoudige oplossing voor dit probleem is:

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

44
2017-12-08 16:04



Ook als je wilt cellspacing="0", vergeet niet toe te voegen border-collapse: collapse in uw tablestylesheet.


40
2017-12-04 09:06