affichage css: table ne affichant pas la bordure

  .table { display: table;} .tablerow { display: table-row; border:1px solid black;} .tablecell { display: table-cell; }  
Hello
world
foo
bar

Selon ma compréhension, une bordure noire devrait être tracée sur chacune des lignes que j’ai spécifiées via la classe de tablerow. Mais la bordure ne se lève pas.

Et je voulais changer la hauteur d’une ligne.Si je le spécifie avec ‘px’ – ça marche.Mais, si je le donne avec un% – ne fonctionnera pas.J’ai essayé les suivants

 .tablerow { display: table-row; border:1px solid black; position: relative; //not affecting anything and the border disappears!! //position: absolute; // if this is set,the rows overlaps and the border works height: 40%; // works only if specified in px and not in % } 

Quelque chose ne va pas quelque part, mais je ne peux pas comprendre où. S’il vous plaît aider!

Vous devez append une border-collapse: collapse; aux border-collapse: collapse; à la classe .table pour que cela fonctionne comme ceci:

   
Hello
world
foo
bar

Vous devez append la border à la classe tablecell .

En outre, pour que cela soit beau, vous devrez append border-collapse:collapse; à la classe de la table.

Exemple: http://jsfiddle.net/jasongennaro/4bvc2/

MODIFIER

Selon le commentaire

J’applique une bordure à un div, il devrait être affiché correctement?

Oui, mais une fois que vous l’avez paramétré pour afficher sous forme de table c’est comme ça qu’il va … comme une table , vous devrez donc suivre les règles CSS pour afficher les tables.

Si vous ne devez définir la border que sur les lignes, utilisez border-top et border-bottom , puis définissez des classes spécifiques pour les cellules les plus à gauche et à droite.

Les lignes de la table ne peuvent pas avoir d’atsortingbut border. Vous pouvez obtenir une bordure autour de chaque ligne en atsortingbuant à toutes les cellules une bordure supérieure et inférieure et en ajoutant une classe pour les cellules les plus à gauche et les plus à droite avec une bordure gauche et droite respectivement.

JS fiddle link

edit: J’ai oublié le border-collapse:collapse . Cela fonctionnera aussi.