Html 使用 CSS 使 DIV 像表格一样工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4262061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making DIVs act like a table using CSS
提问by Yoshiyahu
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?
好的，在设计网站时，我想到了一个想法……我的网站有几个部分更适合用作表格，但不是表格数据。出于某种原因，将桌子用于不是桌子的东西真的让我很烦恼。所以我注意到了 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>
This is what the CSS looks like.
这就是 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; }
I would like the page to look like a table was used but the 'cells' all go on a new-line. Any thoughts?
我希望页面看起来像使用了表格，但“单元格”全部换行。有什么想法吗？
采纳答案by Pekka
Strange: What you quote looks fine, and should work. Are you sure there is no overriding display: block !importantsomewhere?
奇怪：您引用的内容看起来不错，应该可以使用。您确定display: block !important某处没有覆盖吗？
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 exactlytabular data you're displaying.
严重地。在这种情况下不使用表格的主要论点是它们在语义上不是正确的元素。但是看看那个 div-soup，你不得不承认 a<table>是更可取的构造方式，即使它不是你正在显示的完全表格数据。
回答by Pastor Bones
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.
我知道这是一个旧帖子，但由于没有人真正解决了 DIV 的问题，我想我会试一试。
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，因此是 display: 块，使用跨度代替表格单元格（或将 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>
回答by Matt
Maybe a browser issue? Your code works for me in Chrome. See here: http://jsfiddle.net/xVTkP/
可能是浏览器问题？你的代码在 Chrome 中对我有用。见这里：http: //jsfiddle.net/xVTkP/
What are you using?
你在用什么？
(but seriously, as others of said, use a table)
（但说真的，正如其他人所说，使用桌子）
回答by Matt Ball
What browser are you using? These values aren't implemented perfectlyin all browsers. Still, what's the pointof trying to emulate tables with divs+CSS? Why not just use a table?
你使用的是什么浏览器？这些值并未在所有浏览器中完美实现。不过，这有什么意义的尝试与模仿的div + CSS表？为什么不直接使用桌子？
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 overuseof 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.
HTML 创建者通常避免将表格用于非表格数据，因为早期（过去 10 年的某个地方？记不清了）由于过度使用表格作为布局元素而引起的强烈反对。想想：嵌套表中的嵌套表，仅用于填充的空单元格等。克服它。使用完成工作的元素。
Personally, I think that table, table-row, table-cell, etc. should have been left out of the CSS displayspec.
就个人而言，我认为table，table-row，table-cell等应该已经离开了CSS的了display规范。
回答by amit jain
<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>
