Seule bordure intérieure de la table css

Question

Comment créer une table sans bord extérieur mais avec des bordures intérieures uniquement. Quelque chose comme this one (Voir en bas à droite dans la page). Je sais que je peux le créer manuellement comme ils l'ont fait, je veux donner une classe à chaque td mais n'est pas là une meilleure façon de réaliser cela?

Answer 1

Non, ils ne l'ont pas fait comme ça, c'est fait de manière sympa! :)

Cela supprime la bordure droite des cellules.

.sidebar-stats td:last-child, .sidebar-stats th:last-child { 
    border-right: 0 none; 
} 

(De la même manière, vous pouvez enlever le bas-frontière pour la dernière ligne Vous pouvez utiliser Firebug pour analyser leur CSS, aide un beaucoup!)

Answer 2

Vous pouvez styler les éléments td pour avoir des bordures, puis donner votre table border:0, et assurez-vous d'ajouter également border-collapse:collapse à la table. Cela devrait ressembler à ceci à la fin:

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

td { 
border:1px gray solid; 
border-collapse:collapse; 
} 

Answer 3

Voici une solution qui va travailler dans tous les navigateurs, mais vous devez ajouter une classe CSS à la plus droite et de <td> de » bas dans votre table (vs avoir à donner une classe à chaque <td>)

<table> 
    <tr><td class="inner">text</td><td class="inner right">text</td></tr> 
    <tr><td class="inner bottom">text</td><td class="inner bottom right">text</td></tr> 
</table> 

.inner { 
    border-bottom: 1px solid #CCC; 
    border-right: 1px solid #CCC;  
} 

.right { 
    border-right: 0; 
} 

jsFiddle: http://jsfiddle.net/HS4nQ/3/

Answer 4

Ceci est la: variation du premier enfant:

http://jsfiddle.net/6Z7R9/

table.mytable > * > tr > th, 
table.mytable > * > tr > td { 
    border-left: 10px solid red; 
    border-top: 10px solid red; 
} 

table.mytable > * > tr > th, 
table.mytable > * > tr > td:first-child { 
    border-left: none; 
} 

table.mytable > *:first-child > tr:first-child > th, 
table.mytable > *:first-child > tr:first-child > td { 
    border-top: none; 
}