web-dev-qa-db-ja.com

css display：tableは境界線を表示しません

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

私の理解によると、tablerowクラスを介して指定した各行に黒い境界線を描画する必要がありますが、境界線は表示されません。

行の高さを変更したかったのですが、「px」で指定した場合は動作しますが、％で指定した場合は動作しません。

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

どこかで何かがおかしいのですが、どこを理解することができません。助けてください！

fluid-layoutcsscss-tables
68
Vivek Chandra

追加する必要があります border-collapse: collapse; に.tableこのように機能するクラス：

<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

表の行に境界線属性を含めることはできません。すべてのセルに上下の境界線を指定し、左端と右端のセルにそれぞれ左と右の境界線を持つクラスを追加することにより、各行の周囲に境界線を取得できます。

JSフィドルリンク

編集：border-collapse:collapseを忘れました。それも動作します。

2
Ethan Shepherd

borderをtablecellクラスに追加する必要があります。

また、見栄えを良くするには、border-collapse:collapse;をテーブルクラスに追加する必要があります。

例： http://jsfiddle.net/jasongennaro/4bvc2/

[〜＃〜] edit [〜＃〜]

コメント通り

私はdivに境界線を適用しています、それは正しく表示されるはずですか？

はい。ただし、tableとして表示するように設定すると、それがtableとして機能するため、テーブルを表示するためのcssルールに従う必要があります。

行にのみborderを設定する必要がある場合は、border-topおよびborder-bottomを使用してから、左端および右端のセルに特定のクラスを設定します。

2
Jason Gennaro