web-dev-qa-db-fra.com

css display: la table n'affiche pas la bordure

<html>
    <style type="text/css">
        .table   { display: table;}
        .tablerow  { display: table-row; border:1px solid black;}
        .tablecell { display: table-cell; }
    </style>
    <div class="table">
        <div class="tablerow">
            <div class="tablecell">Hello</div>
            <div class="tablecell">world</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">foo</div>
            <div class="tablecell">bar</div>
        </div>
    </div>
</html>

Selon ma compréhension, une bordure noire devrait être tracée sur chacune des lignes que j'ai spécifiées via la classe tablerow.Mais la bordure ne s'affiche 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% - ça ne marchera pas.J'ai essayé ce qui suit

.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 suis pas capable de comprendre où. S'il vous plaît aider!

fluid-layoutcsscss-tables
68
Vivek Chandra

Vous devez ajouter border-collapse: collapse; au .table classe pour que cela fonctionne comme ceci:

<html>
<style type="text/css">
    .table   { display: table; border-collapse: collapse;}
    .tablerow  { display: table-row; border: 1px solid #000;}
    .tablecell { display: table-cell; }
</style>
<div class="table">
    <div class="tablerow">
        <div class="tablecell">Hello</div>
        <div class="tablecell">world</div>
    </div>
    <div class="tablerow">
        <div class="tablecell">foo</div>
        <div class="tablecell">bar</div>
    </div>
</div>
</html>
142
dSquared

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

lien de violon JS

edit: j'ai oublié à propos de border-collapse:collapse. Cela fonctionnera aussi.

2
Ethan Shepherd

Vous devez ajouter le border à la classe tablecell.

En outre, pour que cela paraisse bien, vous devrez ajouter border-collapse:collapse; à la classe de table.

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

[~ # ~] éditer [~ # ~]

Selon le commentaire

j'applique une bordure à une div, elle devrait être affichée non?

Oui, mais une fois que vous l’aurez configurée pour qu’elle s’affiche sous la forme table, il s’agira de la sorte… comme une table, vous devrez donc suivre les règles CSS pour l’affichage des tables.

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

2
Jason Gennaro