Bordure autour de lignes spécifiques dans un tableau?

J’essaie de concevoir du code HTML / CSS capable de placer une bordure autour de lignes spécifiques dans une table. Oui, je sais que je ne suis pas vraiment censé utiliser des tableaux pour la mise en page, mais je ne connais pas assez de CSS pour le remplacer complètement.

Quoi qu’il en soit, j’ai une table avec plusieurs lignes et colonnes, certaines fusionnées avec rowspan et colspan, et j’aimerais mettre une simple bordure autour des parties de la table. Actuellement, j’utilise 4 classes CSS distinctes (haut, bas, gauche, droite) que je connecte aux cellules

situées respectivement en haut, en bas, à gauche et à droite de la table.

 .top { border-top: thin solid; border-color: black; } .bottom { border-bottom: thin solid; border-color: black; } .left { border-left: thin solid; border-color: black; } .right { border-right: thin solid; border-color: black; } 
   
no border no border here either
one two
three four
once again no borders
hello
world

Y a-t-il un moyen plus facile de faire ce que je veux? J’ai essayé d’appliquer le haut et le bas à un

mais cela n’a pas fonctionné. (ps je suis nouveau sur CSS, donc il y a probablement une solution vraiment basique à ce que j’ai raté.)

note: j’ai besoin d’avoir plusieurs sections bordées. L’idée de base est d’avoir plusieurs clusters bordés contenant chacun plusieurs lignes.

Qu’en est-il de tr {outline: thin solid black;} ? Fonctionne pour moi sur les éléments tr ou tbody, et semble être compatible avec la plupart des navigateurs, y compris IE 8+ mais pas avant.

Merci à tous ceux qui ont répondu! J’ai essayé toutes les solutions présentées ici et j’ai fait plus de recherches sur Internet pour d’autres solutions possibles, et je pense en avoir trouvé une qui est prometteuse:

 tr.top td { border-top: thin solid black; } tr.bottom td { border-bottom: thin solid black; } tr.row td:first-child { border-left: thin solid black; } tr.row td:last-child { border-right: thin solid black; } 
     
no border no border here either
one two
three four
once again no borders
hello
world

Si vous définissez le style border-collapse sur la table parent, vous devriez être capable de modifier le style: (les styles sont en ligne pour la démonstration)

 
No Border
Border
No Border

Sortie:

Sortie HTML

Je ne faisais que jouer avec ça, et cela semblait être la meilleure option pour moi:

  

Notez que cela empêchera l’utilisation de largeurs de colonne fluides / automatiques , car les cellules ne seront plus alignées sur celles des autres lignes, mais le formatage des bordures / couleurs fonctionnera toujours correctement. La solution consiste à donner aux TR et aux TD une largeur spécifiée (soit px ou%).

Bien sûr, vous pouvez créer le sélecteur tr.myClass si vous souhaitez l’appliquer uniquement à certaines lignes. Apparemment display: table ne fonctionne pas pour IE 6/7, cependant, mais il y a probablement d’autres hacks (hasLayout?) Qui pourraient fonctionner pour eux. 🙁

Voici une approche utilisant des éléments tbody qui pourraient être le moyen de le faire. Vous ne pouvez pas définir la bordure sur un tbody (comme vous ne le pouvez pas sur un tr), mais vous pouvez définir la couleur d’arrière-plan. Si l’effet que vous souhaitez obtenir peut être obtenu avec une couleur d’arrière-plan sur les groupes de lignes au lieu d’une bordure, cela fonctionnera.

 
no border no border here either
one two
three four
once again no borders
hello
world

Regroupez les lignes à l’aide de la

, puis appliquez le style.

 
No Style here
Style me
And me
No Style here

Et le css dans style.css

 .red-outline { outline: 1px solid red; } 

La seule autre façon de penser à cela est de placer chacune des lignes pour lesquelles vous avez besoin d’une bordure dans une table nestede. Cela rendra la bordure plus facile à faire mais créera potentiellement d’autres problèmes de mise en page, vous devrez définir manuellement la largeur des cellules de la table, etc.

Votre approche pourrait bien être la meilleure en fonction de vos autres exigences de mise en page, et l’approche proposée ici n’est qu’une alternative possible.

 
no border no border here either
one two
three four
once again no borders
hello
world

En fonction de votre exigence de définir une bordure autour d’un bloc arbitraire de cellules MxN, il n’ya pas de moyen plus simple de le faire sans utiliser Javascript. Si vos cellules sont réparées, vous pouvez utiliser des flottants, mais cela pose problème pour d’autres raisons. ce que tu fais peut être fastidieux mais ça va.

Ok, si vous êtes intéressé par une solution Javascript, en utilisant jQuery (mon approche préférée), vous vous retrouvez avec ce morceau de code assez effrayant:

        
no border no border here either
one two
three four
once again no borders

Je serai heureux de prendre des suggestions sur des moyens plus faciles de le faire …

l’astuce est avec la propriété de contour grâce à la réponse d’ énigment avec peu de modification

utiliser cette classe

 .row-border{ outline: thin solid black; outline-offset: -1px; } 

alors dans le HTML

 ....  ... ...  

et le résultat est entrer la description de l'image ici j’espère que cela vous aidera

Un moyen plus simple consiste à faire de la table un contrôle côté serveur. Vous pourriez utiliser quelque chose de similaire à ceci:

 Dim x As Integer table1.Border = "1" 'Change the first 10 rows to have a black border For x = 1 To 10 table1.Rows(x).BorderColor = "Black" Next 'Change the rest of the rows to white For x = 11 To 22 table1.Rows(x).BorderColor = "White" Next