html - 行が列の内側にある場合のテーブルのスタイル

Question

display:table行が列の子であるネストされたdivにCSSタイプのスタイルを使用できるかどうか疑問に思っています。jsfiddleの例を次に示します。

http://jsfiddle.net/UrWEn/1/

または、最大の「セル」に基づいて、各「行」のdivの高さを一緒にロックする別のクリーンな方法はありますか？

さまざまな理由で避けたい：

• マークアップを変更します。
• 行に固定の高さを設定します。
• Javascriptを使用します。

Answer 1

私があなたの問題を理解している限り、あなたはdivからのテーブル構造が欲しいので、cssの下に適用してください

div.column { 
    display : table-row;
    border:1px solid red;
    min-height:150px;
    vertical-align:top;
}
div.row { 
    border:1px solid green;
    width:100%;
    display:table-cell;
}

working DEMO

Answer 2

答えはノーのようです。テーブルは最初に列を使用して作成されるようには設計されていないため、この種のレイアウトを処理するスタイル設定オプションはありません。

htmlテーブル-行または列ごと

javascriptを使用して、各「セル」の高さを「行」の最高の高さに設定する必要がありました。これは私のアプリケーションにとって最も悪いオプションです。

http://jsfiddle.net/UrWEn/4/

var length = $('.column').eq(0).find('.cell').length, // number of rows
    $cells; 

while (length) {
    $cells = $('.cell:nth-child('+ length +')'); // all cells in row
    $cells.height(Math.max.apply(null, $cells.map(function() {
        return $(this).height();
    })));
    length--;
}