使DIV像使用CSS的表格一样工作
好吧，在设计一个网站的时候，我遇到了一个想法......我的网站有几个部分可以更好地适合作为表格使用，但不是表格数据。 出于某种原因，它真的让我错误地使用表格来表示不是表格的东西。 所以我注意到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; }
我希望这个页面看起来像一张桌子，但'单元格'都是一条新线。 有什么想法吗？
奇怪：你引用的内容看起来很好，应该可以工作。 你确定没有压倒性的display: block !important地方？
但正如我的意见，我要说的是，为了上帝的爱，只需使用一张桌子。 :)
认真。 在这种情况下不使用表格的主要理由是它们在语义上不是正确的元素。 但是看这个div-soup，你必须承认一个<table>是更好的构造方式，即使它不是你正在显示的表格数据。
我知道这是一个旧帖子，但由于没有人真正解决了DIV的问题，我以为我会放弃它。
你的问题很简单...你的单元格元素是div，因此是display：block，而不是表格单元格（或者添加display：inline到.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>
也许浏览器的问题？ 您的代码在Chrome中适用于我。 看到这里：http://jsfiddle.net/xVTkP/
你在用什么？
（但是，正如其他人所说的，使用表格）
链接地址: http://www.djcxy.com/p/94523.html