CSS-Anzeige: Tabelle ohne Rand

Question 1

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

Question 2

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>

Question 3

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.

Question 4

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.