让DIV像一张使用CSS的桌子一样行动

好的，在设计一个网站的时候，我遇到了一个想法...我的网站有几个部分可以更好地适合作为表格使用，但不是表格数据。出于某种原因，它真的让我错误地使用表格来表示不是表格的东西。所以我注意到CSS的显示选项，但我无法让它正常工作。这是我正在尝试的。什么是问题？让DIV像一张使用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; }

我想的页面看起来像一个表使用，但“细胞”都去上了一个新行。有什么想法吗？

来源

2010-11-23 Yoshiyahu

在Firefox 3.6.12的伟大工程。你正在使用哪种浏览器？ – 2010-11-23 23:24:41

看起来像表格数据给我。请不要重复发现带有镜像标记的div和css类名称的轮子 – redsquare 2010-11-23 23:25:09

@ redsquare-重新创建轮子是我的专长。 – Yoshiyahu 2010-11-24 00:06:41

奇怪：你引用的话看起来很好，应该可以工作。你确定在某个地方没有压倒性的display: block !important吗？

但是，正如我的意见，我要说，对于上帝的爱，只是使用一张桌子。 :)

说真的。在这种情况下不使用表格的主要理由是它们在语义上不是正确的元素。但看着这个div-soup，你不得不承认<table>是更好的构造方式，即使它不是正好是你正在显示的表格数据。

来源

2010-11-23 23:25:53

我完全同意。毕竟，我曾经使用表格进行设计。然而，随着表格的复杂性，我转而使用DIV。我只是不喜欢错误地使用表格出于自豪感和渴望使用/更正？/文档。啊......看来我仿效IE6中的页面......工作正常。 – Yoshiyahu 2010-11-23 23:35:34

有一点你需要问自己：“它真的值得吗？”这是其中的情况之一。

来源

2010-11-23 23:25:41 simshaun

也许浏览器的问题？您的代码在Chrome中适用于我。请看这里：http://jsfiddle.net/xVTkP/

你在用什么？

（但严重的是，因为说别人的，使用一个表）

来源

2010-11-23 23:26:14 Matt

是什么浏览器您使用？这些值在所有浏览器中均为aren't implemented perfectly。仍然，想要用divs + CSS模拟表格的点是什么意思？为什么不使用表格？

HTML创建者通常避免使用表格未因为早期的表格（在过去10年中的某个地方？记不清了）数据反弹起因于表作为布局元素的过度使用。认为：嵌套表中的嵌套表格，仅用于填充的空单元格等。克服它。使用完成工作的元素。

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

来源

2010-11-23 23:26:18

我知道这是一个旧帖子，但由于没有人真正解决了您的DIV问题，我以为我会放弃它。

您的问题很简单...您的单元格元素是div，因此显示：block，使用跨度代替表格单元格（或添加显示内联到.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>

来源

2012-09-28 06:08:34

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

来源

2013-08-06 14:13:16

让DIV像一张使用CSS的桌子一样行动

回答

相关问题