css - CSS 表示:表内に div がある表セル

Question

table-row スタイルの div がテーブル セル内にある場合、display:table-cell スタイルを機能させる方法 (または類似の代替手段) を作成するには? （リンクを参照）

http://jsfiddle.net/ELKQg/460/

container1 div が container2 のように動作することを望みます。

コード: (リンクが到達不能になった場合)

html:

<div id="container1" class="container">
    <table>
        <tr>
            <td>
    <div class="row">
        <div class="cell">aaaa</div>
        <div class="cell expand">b</div>
        <div class="cell">c</div>
    </div>
            </td>
        </tr>
        <tr>
            <td>
    <div class="row">
        <div class="cell">d</div>
        <div class="cell expand">eeeee</div>
        <div class="cell">f</div>
    </div>
            </td>
        </tr>
    </table>
</div>

<div id="container2" class="container">
    <div class="row">
        <div class="cell">aaaa</div>
        <div class="cell expand">b</div>
        <div class="cell">c</div>
    </div>
    <div class="row">
        <div class="cell">d</div>
        <div class="cell expand">eeeee</div>
        <div class="cell">f</div>
    </div>
</div>

CSS:

.container{width: 500px;overflow:hidden; /* instead of clearfix div */}  
 div { border:1px solid;padding: 1px;}    
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}

Answer 1

1. あなたの<table>を含む余分なものは持っている必要があります<div>.container1width: 100%
2. display: table-celldisplay: table-row親がである限り、要素は必ずしも含む必要はありませんdisplay: table。をそれに設定し.rowます（ルールが意味をなさなくなったため、名前を変更するのが理想的です）

デモを修正してフォークしました：http： //jsfiddle.net/barney/ahMg8/

Answer 2

td内部のdivの代わりに'sを使用しますtr：

<div id="container1" class="container">
    <table>
        <tr>
            <td class="cell">aaaa</td>
            <td class="cell expand">b</td>
            <td class="cell">c</td>
        </tr>
        <tr>
            <td class="cell">d</div>
            <td class="cell expand">eeeee</td>
            <td class="cell">f</td>
        </tr>
    </table>
</div>

ワーキングフィドル

Answer 3

使用するdisplay: table前に親テーブルに使用display:table-cell