Question

好吧，在设计一个网站的时候，我遇到了一个想法...我的网站的一些部分更适合作为一个表格，但不是表格数据。出于某种原因，我真的很烦我使用表格来表示不是桌子的东西。所以我注意到CSS的显示选项，但我无法让它正常工作。这是我正在尝试的。有什么问题？

<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>

这就是CSS的样子。

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

我希望页面看起来像一张桌子，但'细胞'全部都在换行。有什么想法吗？

Answer 1

奇怪：你引用的内容看起来不错，应该有用。你确定某处没有覆盖display: block !important吗？

但正如我的观点，我会说，为了上帝的爱，只需使用一张桌子。 :)

严重。在这种情况下不使用表的主要论点是它们在语义上不是正确的元素。但是看看那个div-soup，你必须承认<table>是更优选的构造方式，即使它不是正好表格数据你正在显示。

Answer 2

我知道这是一个很老的帖子，但由于没有人真正解决你的DIV问题，我以为我会试一试。

你的问题很简单......你的单元格元素是div，因此显示：block，而是使用span代替表格单元格（或者添加display：inline to .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>

Answer 3

也许是浏览器问题？您的代码适用于Chrome。见这里：http://jsfiddle.net/xVTkP/

你在用什么？

（但严肃地说，正如其他人所说，使用表格）

Answer 4

<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>

Answer 5

您使用的浏览器是什么？所有浏览器中的这些值aren't implemented perfectly。尝试使用div + CSS模拟表格时，有什么意义？为什么不用一张桌子？

HTML创建者通常会避免将表格用于不是表格的数据，因为早期（过去10年的某个地方？不记得）由于过度使用表格作为布局元素而产生的反弹。想一想：嵌套表中的嵌套表，仅用于填充的空单元格等。克服它。使用完成工作的元素。

就我个人而言，我认为table，table-row，table-cell等应该被排除在CSS display规范之外。

使DIV像使用CSS的表一样

5 个答案: