wake-up-neo.com

CSS-Anzeige: Tabelle zeigt den Rand nicht an

<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 in jede der Zeilen, die ich in der tablerow-Klasse angegeben habe, ein schwarzer Rand eingezeichnet 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-layoutcsscss-tables
68
Vivek Chandra

Sie müssen hinzufügen border-collapse: collapse; zum .table Klasse, damit es so 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>
142
dSquared

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

JS Fiddle Link

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

2
Ethan Shepherd

Sie müssen border zur Klasse tablecell hinzufügen.

Außerdem müssen Sie der Tabellenklasse border-collapse:collapse; Hinzufügen, damit sie gut aussieht.

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

[~ # ~] edit [~ # ~]

Wie aus dem Kommentar hervorgeht

ich wende einen Rahmen auf ein Div an. Sollte er richtig angezeigt werden?

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

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

2
Jason Gennaro