0

I am trying to imitate table rows and cells with use of divs. I want same results as:

<table width = '100%'>
    <tr>
        <td>asd</td>
        <td>dsa</td>
    </tr>
</table>

And trying in that way:

<div style = 'width: 100%; border: dashed;'>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>dsa</div>
</div>

And that:

<div style = 'width: 100%; border: dashed;'>
    <div style = 'width: 50%; display: inline; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: inline; border: dashed;'>dsa</div>
</div>

And when inner div's width is 100%.

But inner divs never fill whole width of parent div. The best case - they are one after another, but "minimal to fit content width" enter image description here

Kosmo零
  • 4,001
  • 9
  • 45
  • 88

2 Answers2

1

Add display: table; to the parent div.

<div style = 'width: 100%; border: dashed; display: table;'>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>dsa</div>
</div>

http://jsfiddle.net/kgemxvu7/

idmean
  • 14,540
  • 9
  • 54
  • 83
  • will this apply all table bugs? I means wrong height calculations – Kosmo零 Aug 10 '14 at 15:56
  • @Kosmos How do you define table bugs? Tables are not buggy, if you use them correct. And to me this seems a correct use case. – idmean Aug 10 '14 at 15:57
  • http://stackoverflow.com/questions/25119868/why-my-heights-fixer-code-work-wrong-when-browser-window-restored-after-being-ma - Here table height calculations bugs. – Kosmo零 Aug 10 '14 at 15:58
  • @Kosmos I'm not sure if there will be such bugs. If you want to use the table for layout, you should instead really consider using Bootstrap. – idmean Aug 10 '14 at 16:00
  • Will test that for bugs and see how is that. – Kosmo零 Aug 10 '14 at 16:05
1

You need to add display: table to the div containing the table rows/cells, and then just remove the width: 50% stuff.

<div class="table" style="width: 100%; display: table;">
    <div style="display: table-row">
        <div style="display: table-cell">
            Data1
        </div>
        <div style="display: table-cell">
            Data2
        </div>
    </div>
</div>

Take a look at this jsFiddle to see how I did it with CSS.

http://jsfiddle.net/Chartax/3mysLndy/

But looking at your other questions, it appears that you want to use tables for layouts as opposed to divs. Just changing the tag to div and making them all act identically to tables is not really the way to go.

Use divs with dynamic sizing (width: 20% etc.) so that you are reacting to the user's browser and screen size.

Alastair Campbell
  • 648
  • 4
  • 18
  • 1
    sometimes nothing is more easy than tables. – Kosmo零 Aug 10 '14 at 16:10
  • Clinging to tables to layout content is like not using a car because nothing is more easy than riding a horse. If you want to use tables, use tables. There is no point in using divs and making them act exactly like tables – Alastair Campbell Aug 10 '14 at 20:41