CODEWITHSUNDEEP
csshtml
lelmarir
lelmarir

Reputation: 611

CSS display:table-cell with div inside table

How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link)

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

I'd like the container1 div behave like the container2.

code: (if the link were to become unreachable)

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

Upvotes: 1

Views: 16945

Answers (3)

Barney
Barney

Reputation: 16456

  1. The extra <table> containing your <div>s in .container1 needs to have width: 100%
  2. display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)

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

Upvotes: 1

Morpheus
Morpheus

Reputation: 9055

Use td's instead of divs 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 fiddle

Upvotes: 0

Aleem
Aleem

Reputation: 17

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

Upvotes: 0

Related Questions