CODEWITHSUNDEEP
htmlcsscss-tables
Yoshiyahu
Yoshiyahu

Reputation: 2168

Making DIVs act like a table using CSS

Alright, while designing a site, I came across a thought... I have a few parts of my site which would be better suited acting as a table, but isn't tabular data. For some reason it really bugs me to use a table for something that isn't a table. So I noted CSS's display options, yet I can't get it to work right. Here is what I am trying. What is the issue?

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

This is what the CSS looks like.

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

I would like the page to look like a table was used but the 'cells' all go on a new-line. Any thoughts?

Upvotes: 33

Views: 81568

Answers (5)

amit jain
amit jain

Reputation: 325

<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
        </div>
    </div>
</body>

Upvotes: 9

Pastor Bones
Pastor Bones

Reputation: 7371

I know this is an old post, but since nobody actually fixed your problem with the DIV's I thought I'd give it a go.

Your problem is simple...your cell elements are divs and therefore are display: block, use spans instead for table cells (or add display:inline to the .cell CSS).

<div class="table">
  <div class="tr">
    <span class="td">Row 1, Cell 1</span>
    <span class="td">Row 1, Cell 2</span>
    <span class="td">Row 1, Cell 3</span>
  </div>
  <div class="tr">
    <span class="td">Row 2, Cell 1</span>
    <span class="td">Row 2, Cell 2</span>
    <span class="td">Row 2, Cell 3</span>
  </div>
</div>

Upvotes: 10

Matt Ball
Matt Ball

Reputation: 360016

What browser are you using? These values aren't implemented perfectly in all browsers. Still, what's the point of trying to emulate tables with divs+CSS? Why not just use a table?

HTML creators generally avoid using tables for data which isn't tabular because of the early (somewhere in the last 10 years? can't remember) backlash that resulted from overuse of tables as layout elements. Think: nested tables in nested tables, empty cells just for padding, etc. Get over it. Use the element that gets the job done.

Personally, I think that table, table-row, table-cell, etc. should have been left out of the CSS display spec.

Upvotes: 4

Matt
Matt

Reputation: 44078

Maybe a browser issue? Your code works for me in Chrome. See here: http://jsfiddle.net/xVTkP/

What are you using?

(but seriously, as others of said, use a table)

Upvotes: 6

Pekka
Pekka

Reputation: 449783

Strange: What you quote looks fine, and should work. Are you sure there is no overriding display: block !important somewhere?

But as my opinion, I'm going to say that for the love of God, just use a table. :)

Seriously. The main argument for not using tables in such situations is that they aren't the right element semantically. But looking at that div-soup, you have to admit a <table> is the way more preferable construct, even if it's not exactly tabular data you're displaying.

Upvotes: 27

Related Questions