☰

css display:table 境界線が表示されない 質問する

tag-icon • tag-icon fluid-layout css css-tables
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 %
}

どこかで何か問題が発生しているようですが、どこが問題なのかわかりません。助けてください!

ベストアンサー1

追加する必要がある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>

おすすめ記事