使用 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; }
我希望页面看起来像使用了表格，但“单元格”全部换行。有什么想法吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
奇怪：你引用的内容看起来不错，并且应该有效。您确定某处没有覆盖
display: block !important吗？但按照我的观点，我想说，看在上帝的份上，就用一张桌子吧。 ：）
严重地。在这种情况下不使用表的主要论点是它们在语义上不是正确的元素。但是看看那个 div-soup，您必须承认
是更优选的构造，即使它不完全您正在显示的表格数据。Strange: What you quote looks fine, and should work. Are you sure there is no overriding
display: block !importantsomewhere?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.我知道这是一篇旧帖子，但由于没有人真正解决您的 DIV 问题，我想我应该尝试一下。
您的问题很简单...您的单元格元素是 div，因此是 display: block，请使用 span 代替表格单元格（或将 display:inline 添加到 .cell CSS）。
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).
也许是浏览器问题？你的代码在 Chrome 中适用于我。请参阅此处：http://jsfiddle.net/xVTkP/
您在使用什么？
（但认真地说，正如其他人所说，使用表格）
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)
您使用什么浏览器？这些值并未在所有浏览器中完美实现。不过，尝试用 div+CSS 模拟表格有什么意义呢？为什么不直接使用一张桌子呢？
HTML 创建者通常会避免使用表格来存储非表格数据，因为早期（在过去 10 年的某个时间？不记得了）由于过度使用表格作为布局元素而引起强烈反对。想一想：嵌套表格中的嵌套表格、仅用于填充的空单元格等。克服它。使用能完成工作的元素。
就我个人而言，我认为
table、table-row、table-cell等应该被排除在 CSSdisplay 之外规格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 CSSdisplayspec.