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

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

4

3 に答える 3

172

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>
于 2011-08-24T12:18:15.387 に答える
2

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

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

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

編集

コメントの通り

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

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

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

于 2011-08-24T12:06:48.353 に答える
2

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

JSフィドルリンク

編集：忘れていましborder-collapse:collapseた。それもうまくいきます。

于 2011-08-24T12:17:47.773 に答える