CSS-Anzeige: Tabelle ohne Rand

72 
<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>

Nach meinem Verständnis sollte auf jeder der Zeilen, die ich über die Tablerow-Klasse angegeben habe, ein schwarzer Rand gezeichnet werden. Der Rand wird jedoch nicht angezeigt.

Und ich wollte die Höhe einer Zeile ändern. Wenn ich es mit 'px' spezifiziere, funktioniert es. Aber wenn ich es mit einem% gebe, funktioniert es nicht. Ich habe Folgendes versucht 

.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 %
}

Irgendwo läuft etwas schief, aber ich kann nicht verstehen, wo. Bitte helfen Sie!

fluid-layout css css-tables Vivek Chandra
quelle
Haben Sie versucht, einen Rahmen für die Zellenelemente anzugeben? oder ist es nicht was du willst?
Paweł Adamski

Antworten:

161

Sie müssen border-collapse: collapse;der .tableKlasse hinzufügen , damit sie wie folgt funktioniert:

<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>
dSquared
quelle
1
Vielen Dank! Ihre Lösung hat geholfen!
Yathrakaaran
2

Sie müssen das borderder tablecellKlasse hinzufügen .

Damit es schön aussieht, müssen Sie border-collapse:collapse;der Tabellenklasse hinzufügen .

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

BEARBEITEN

Wie im Kommentar

Ich wende einen Rahmen auf ein Div an, es sollte richtig angezeigt werden?

Ja, aber sobald Sie es so eingestellt haben, dass es als angezeigt tablewird, verhält es sich so ... als table, sodass Sie die CSS-Regeln für die Anzeige von Tabellen befolgen müssen.

Wenn Sie bordernur die Zeilen festlegen müssen , verwenden Sie border-topund border-bottom und legen Sie dann bestimmte Klassen für die Zellen ganz links und ganz rechts fest.

Jason Gennaro
quelle
Warum kann ich nicht die Grenze für eine Reihe geben?
Vivek Chandra
Ich wende einen Rahmen auf ein Div an, es sollte richtig angezeigt werden?
Vivek Chandra
Kein Problem @Vivek. Froh, dass ich Helfen kann!
Jason Gennaro
2

Tabellenzeilen dürfen kein Rahmenattribut haben. Sie können einen Rand um jede Zeile erhalten, indem Sie allen Zellen einen oberen und unteren Rand zuweisen und eine Klasse für die Zellen ganz links und ganz rechts mit einem linken bzw. rechten Rand hinzufügen.

JS Geigenlink

edit: Ich habe es vergessen border-collapse:collapse. Das wird auch funktionieren.

Ethan Shepherd
quelle