Couleur de bordure de tableau dans CSS avec effondrement de bordure

Je souhaite placer une ligne au-dessus d'un champ d'une table pour indiquer qu'il s'agit d'une somme des valeurs ci-dessus. Cependant, la table a déjà des bordures par défaut.Couleur de bordure de tableau dans CSS avec effondrement de bordure

Voici un exemple: J'ai une table avec des bordures repliées. Je place le bord inférieur sur un champ, et le bord supérieur sur le champ en dessous. Les deux spécifient la même bordure. Le CSS pour le premier est utilisé. Y a-t-il un moyen d'utiliser celui du bas?

<html> 
    <head> 
     <style type="text/css"> 
      table { border-collapse: collapse; } 
      td.first { border-bottom: solid red 1px; } 
      td.second { border-top: solid gold 1px; } 
     </style> 

    <body> 
     <table> 
      <tr><td class="first">Hello</td></tr> 
      <tr><td class="second">World</td></tr> 
     </table> 
    </body> 
</html>

Ceci montre deux cellules avec une ligne rouge entre elles. Est-il possible d'obtenir une ligne d'or?

Source

2010-11-04 Sjoerd

Cela a à voir avec la résolution de conflit. [Ceci est une page] (http://www.the-art-of-web.com/css/bordercollapse/) qui explique comment cela fonctionne et comment le navigateur calcule les différentes bordures. –

Je crois qu'il n'y a pas de solution CSS pour cela, parce que l'effondrement de la bordure fait juste ce qu'il fait. Vous pouvez utiliser certaines solutions de contournement, par exemple utiliser javascript. Avez-vous des bibliothèques javascript incluses dans votre document? –

Je l'ai résolu en utilisant jQuery, en utilisant quelque chose comme ceci: http://www.mail-archive.com/[email protected]/msg89877.html – Sjoerd

Il s'agit d'un comportement défini de border-collapse. Page 357 du Guide définitif O'Reilly CSS 3e édition dit:

si les frontières ont le même effondrement de style et la largeur, mais diffèrent par la couleur, puis ... du plus au moins préféré: cellule, rangée, rangée groupe, colonne, groupe de colonnes, table. Si ... proviennent du même type d'élément, tel que deux rangs ... alors la couleur est prise à partir des bordures qui sont les plus en haut et les plus à gauche.

Ainsi, le plus haut, qui est rouge, l'emporte. Une manière de surcharger cela peut être d'utiliser une cellule pour que la couleur l'emporte sur la couleur de la ligne.

exemple: http://jsfiddle.net/Chapm/

Les règles qui ont une priorité plus élevée que cette "règle de la même couleur est"

gagne plus large frontière sur plus étroites

et après cela,

double victoires sur solide, puis en pointillé, pointillé, crête, sur ensemble, rainure, encart

Vous pouvez utiliser 2px pour l'or pour elle de gagner, et j'ai essayé dans Chrome d'utiliser 1px mais double, et il semble que 1px solid et il gagnera sur le rouge aussi bien. Bien que si vous voulez utiliser cette méthode, il est préférable de vous assurer que les navigateurs que vous utilisez fonctionnent de la même manière.

http://jsfiddle.net/Chapm/2/

Source

2010-11-04 12:19:23

Cela résout en effet mon problème. Cependant, cela ne fonctionne pas dans IE7. – Sjoerd

J'ai mis à jour avec plus de règles ... oui, c'est assez spécifique et peut-être pas la même chose dans tous les types de navigateurs. –

Merci beaucoup! Je me débattais si mal avec ça et je n'avais aucune idée de ce qui se passait. Le double tour a bien fonctionné. Je l'utilise pour montrer une bordure autour d'un 'TR' sur un vol stationnaire. – vaughan

Enlever border-collapse: collapse; de votre code, à la place définir l'attribut cellspacing à 0 pour votre table.

Source

2010-11-04 12:08:42

Cela ne fonctionne pas pour moi ... –

vérifier ce http : //jsfiddle.net/CKHwj/. définir border-collapse: séparé; –

Ouais mais celui-là montre à la fois l'or et la bordure rouge (Firefox) –

Retirez simplement le td.first { border-bottom: solid red 1px; } de votre style.

Ou de remplacer red par gold dans le sélecteur td.first.

Example here.

Source

2010-11-04 12:10:20 Kyle

changer juste border-collapse pour séparer et border-spacing à zéro.

Remarque: IE8 prend en charge la propriété border-spacing uniquement si un! DOCTYPE est spécifié.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    table { 
 
     border-collapse: separate; 
 
     border-spacing: 0px; 
 
    } 
 
    
 
    td.first { 
 
     border-bottom: solid red 1px; 
 
    } 
 
    
 
    td.second { 
 
     border-top: solid gold 1px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td class="first">Hello</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="second">World</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

testé sur win7 avec: Chrome 16, IE 9, FF 9, Safari 5.0.5.

Source

2012-02-09 13:09:15

La question OP était un peu bizarre. Je ne sais pas s'il voulait deux frontières ou non. Je suis arrivé ici parce que je voulais une table avec une bordure en haut et en bas de chaque '', mais les frontières s'effondraient. J'ai essayé 'border-collapse: separate' et il y avait des marges autour des cellules dont je ne pouvais pas me débarrasser avec CSS. C'était le 'espacement des frontières: 0' il me manquait. Merci pour votre réponse. – Gavin

Couleur de bordure de tableau dans CSS avec effondrement de bordure

Répondre

Questions connexes