CSS : verschillende borders in 1 tabel

[leifoet]

Ben niet (zo) bedreven in CSS.

Met volgende code is een volledige tabel voorzien van borders :

table, td, th {    
    border: 1px solid #ddd;
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 2px;
}

Hoe kan ik in dezelfde tabel gedeelten (bijvoorbeeld de onderste helft of andere willekeurige delen) opmaken zonder border (of met andere borders) ?
Mijn probleem : waar plaats ik de correcte codes ?
Dank voor tips.

 

[Aar]

Dan kan je daar een class-attribuut aan hangen.

En in CSS doe je bijvoorbeeld dit:

.jouwclassnaam {    
    border: 1px solid #ddd;
    background-color: #F0F0F0;
}

 

[bron]

De optie van Aar is de beste.

willekeurige delen) opmaken zonder border (of met andere borders)

Alternatief, in dit voorbeeld 2e rij van boven, 3e cel van links

table tr:nth-child(2) td:nth-child(3) {
    border: 1px solid transparent;
}

Nadelen hiervan:
- niet echt overzichtelijk tenzij het om 1 of 2 cellen gaat.
- bij meerdere tabellen op 1 pagina is een <table id="...."> nodig

 

[leifoet]

Mijn probleem : waar plaats ik de correcte codes

Bijvoorbeeld : weglaten van de border in de onderste/laatste rijen van een tabel

Bestaande CSS-code (cfr. sub #1)

table, td, th {    
    border: 1px solid #ddd;
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 2px;
}

Deze code toegevoegd (onder bovenstaande in head)

.zonder {
     border: none;
}

Ingevoegd boven de 'laatste rijen' <tr> van de tabel (in body)

<CLASS="zonder">

... alles mét border - opdracht dus niet uitgevoerd

Verkeerd gespoord ? Foutieve opdrachtcodes ?
Dank voor tips.

 

[Aar]

<CLASS="zonder">

is onzin. Het is een argument, geen tag.

 

[bron]

Voorbeeld

<table>
  <tbody>
    <tr class="border-rood">
      <td class="geen-border">Dit is zonder border</td>
      <td>Hier staat tekst met rode border</td>
    </tr>
  </tbody>
</table>

De css zet je onder de css van berichtje #4

/* maak border rood */
table .border-rood {
   border: 1px solid red;
}
/* maak border transparent */
table .geen-border {
   border: 1px solid transparent;
}

weglaten van de border in de onderste/laatste rijen van een tabel

table tr:last-child td {
  border: 1px solid transparent;
}

Om een beter antwoord te geven is nodig
- de html van de tabel
- of je de html wel/niet kan aanpassen

 

[leifoet]

Dank bron voor de code sub #6 - werkt voor de laatste row.

Heb hiermee in combinatie met jouw alternatief sub #3 geprobeerd om andere rows van de tabel bordervrij te maken.

table tr:last-child td {
    border: 1px solid transparent;
}
table tr:nth-last-child(2) td {
    border: 1px solid transparent;
}
table tr:nth-last-child(3) td {
    border: 1px solid transparent;
}

Dit werkt voor de 3 onderste rows - maar kan dat ook zonder 'herhalingen' ?
Dank voor tips.

 

[bron]

Je vindt de selectors die je mag gebruiken op deze pagina.

Uitgebreide :nth-child(n) selectors kan je gebruiken maar het vraagt vaak om meer denk- en testwerk.
Zie bijvoorbeeld deze pagina