CSS mapping: cell table with inner table div

Question

How to make a mapping: does the table-cell style work (or is the alternative similar to the alternative) if the divs with the table-row are inside the table cells? (see link)

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

I would like container1 div to behave like container2.

code: (if the link was to become inaccessible)

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

• An extra <table> containing your <div> in .container1 should have width: 100% Elements
• display: table-cell does not have to contain display: table-row if the parent is display: table . Set .row for this parameter (ideally, you renamed it when you saw that the rule no longer made sense)

Fixed and forked demo: http://jsfiddle.net/barney/ahMg8/

Answer 2

Use display: table for the parent table before using display:table-cell

Answer 3

Use td instead of div inside 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> 

Working violin