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?

---

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.

---

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>

---

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)

链接地址: http://www.djcxy.com/p/94524.html

上一篇: 表格单元格内容旋转bug ie8和ie9

下一篇: 使DIV像使用CSS的表格一样工作