Création de lignes de tableau avec des bordures larges sans saigner dans les lignes adjacentes

Question

J'ai un tableau HTML des listes de tickets (par exemple http://seatgeek.com/event/show/23634/buffalo-bills-vs-tennessee-titans/). Je voudrais mettre en évidence certaines lignes avec une bordure de 2px. Le problème est que cela saigne dans les cellules adjacentes et couvre d'autres frontières. Par exemple, j'ai une limite inférieure 1px sur la première rangée de cellules (pour désigner que c'est un en-tête). Si j'essaie d'appliquer une bordure de 2px à la deuxième rangée, alors elle couvre la bordure dans la première.

Ma première réaction a été de définir une marge pour les problèmes, mais j'ai cherché une solution, et il semble que ce n'est pas possible. Y a-t-il une autre solution?

Answer 1

Il semble que c'est l'effondrement de la bordure qui pose problème ici. Si vous retirez le

table { 
    border-collapse:collapse; 
} 

vous obtiendrez ce que vous cherchez.

Answer 2

Il se peut que vous rencontriez un croisement de modèle de boîte. http://www.w3.org/TR/CSS2/box.html

Pour chaque px ou bordure ajoutée, vous devrez supprimer le remplissage ou la largeur équivalente. si 1px à gauche et à droite puis 2px de largeur.

Si ce n'est pas le cas, vous devrez peut-être ajouter une marge à la tr.