Quadrillage CSS pour colonnes en alternance

J'ai créé une table avec 20 lignes et 10 colonnes. Je voudrais créer un quadrillage séparant deux colonnes. Donc, entre les colonnes 2 et 3, il y aurait une ligne les séparant. Il faut aussi des lignes séparant les colonnes 4 et 5, les colonnes 6 et 7 et les colonnes 8 et 9.Quadrillage CSS pour colonnes en alternance

Mais je ne veux pas de ligne séparant les colonnes 1 et 2, ou les colonnes 3 et 4, etc.

Y at-il un moyen de le faire avec CSS? J'ai essayé de créer une bordure gauche sur chaque cellule individuelle de la colonne, mais cela ne me donne pas une ligne continue descendant dans la colonne.

Toute aide serait grandement appréciée.

Source

2010-05-20 Michael

Avez-vous des souce HTML/CSS nous coudl un regard sur pour vous aider? Pouvez-vous – Kyle

Je pense que votre problème de ligne continue est la propriété 'border-collapse' sur la table. Si vous ne définissez pas 'border-collapse: collapse', il y aura des espaces entre les cellules de votre tableau.

Voici un exemple de la table, avec les frontières entre les colonnes 2 et 3, 4 et 5, etc:

<html> 
<head> 
<style type="text/css"> 
    table { 
     border-collapse:collapse; 
     border:1px solid black; 
    } 

    td { 
     padding:2px 8px; 
    } 

    .border { 
     border-right:1px solid black; 
    } 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
</tr> 
<tr> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
    <td>asdf</td><td class="border">asdf</td> 
</tr> 
</body> 
<html>

Source

2010-05-20 13:51:10 MattHughesATL

Vous pouvez utiliser

td:nth-child(2n){ 
    border-right: 1px solid #000 
}

Ce qui ne sélectionnera tous les autres td et ajoutez-leur la bordure

C'est la façon la plus propre de le faire, car il n'a pas besoin de balisage externe. Mais pas tous les navigateurs va la traiter :(

Source

2010-05-22 16:45:42

Avec CSS, vous pouvez obtenir le même effet, vérifier http://www.w3.org/Style/Examples/007/evenodd

Source

2013-11-14 19:42:25

ajouter le texte approprié du lien à la réponse? – freemanoid

Quadrillage CSS pour colonnes en alternance

Répondre

Questions connexes