Html 如何让<div>、<span>或list将表格数据显示为表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12521209/
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
How to make <div>, <span>, or list display tabular data as a table?
提问by Lawtonfogle
First, let me say that I have read other responses on this, and I realize that for tabular data, using tables is the best way to go. The reason I am needed to use something other than a table is because I am using a jquery plugin (Jquery UI sortable to be exact) that requires certain rows of data to be nested inside of others. I know of no way to do this with tables, and thus I need to use another element (I am currently using divs).
首先，让我说我已经阅读了关于此的其他回复，并且我意识到对于表格数据，使用表格是最好的方法。我需要使用表以外的其他东西的原因是因为我使用了一个 jquery 插件（准确地说是 Jquery UI 可排序），它需要将某些数据行嵌套在其他行中。我知道没有办法用表格来做到这一点，因此我需要使用另一个元素（我目前正在使用 div）。
My data is standard tabular data that is 1 cell per piece of data.
我的数据是标准表格数据，每条数据有 1 个单元格。
Name Address
Bob 123 Main edit_button drag&drop_button
Joe 123 Fake edit_button drag&drop_button
Sue 456 Road edit_button drag&drop_button
Ann 123 Street edit_button drag&drop_button
In this example, dragging Bob will also drag Joe and Sue, Bob's team, with him. Ann can only be moved on top of the three or below the three, while Joe and Sue can only switch places with each other.
在此示例中，拖动 Bob 也会同时拖动 Bob 的团队 Joe 和 Sue。安只能在三个上面或三个下面移动，而乔和苏只能互相交换位置。
In html, it appears like this.
在html中，它看起来像这样。
<div class="table">
<div class="header">Header information</div>
<div>
<div class="row">Bob's information</div>
<div>
<div class="row">Joe's information</div>
<div class="row">Sue's information</div>
</div>
</div>
<div>
<div class="row">Ann's information</div>
</div>
</div>
To my knowledge, this nesting cannot be done with tables.
据我所知，这种嵌套不能用表来完成。
I do not need to use divs, if something else would work better.
我不需要使用 div，如果其他东西会更好。
My question is basically how would I get this information to show up in a tabular format?
我的问题基本上是如何让这些信息以表格格式显示？
Currently, my best guess is to put each element of data, including the headers, in a div with fixed width (and apply borders as needed for appearance), but this means that the 'table' may not resize to best fit the information given.
目前，我最好的猜测是将每个数据元素（包括标题）放在一个具有固定宽度的 div 中（并根据外观需要应用边框），但这意味着“表格”可能不会调整大小以最适合给定的信息.
Another attempt I have made, which is arguably much messier, is to, in each 'row', have a new table with the same setup, which includes a header that is not displayed. This gives almost the look I want, but some of the spacing is noticeably off if the names are not the exact length.
我所做的另一个尝试，可以说是更加混乱，是在每一“行”中都有一个具有相同设置的新表，其中包括一个未显示的标题。这几乎给了我想要的外观，但如果名称不是确切的长度，一些间距会明显偏离。
P.S. I hope the actual question is not too specific even though I think my justification for why a table will not work seems a bit too specific.
PS 我希望实际问题不是太具体，尽管我认为我为什么表格不起作用的理由似乎有点太具体了。
Edit:
编辑：
Would there be some way to get the following to work so that a table could still be used?
是否有某种方法可以使以下内容起作用，以便仍然可以使用表格？
<table>
<thead>table header stuff</thead>
<tbody>
<mtne*>
<tr>Bob's information</tr>
<mtne>
<tr>Joe's information</tr>
</mtne>
<mtne>
<tr>Sue's information</tr>
</mtne>
</mtne>
<mtne>
<tr>Ann's information</tr>
</mtne>
</tbody>
</table>
*mtne = mythical table nesting element.
*mtne = 神话表嵌套元素。
Edit 2:
编辑2：
Upon further testing, I've found that the css styling to make divs behave like tables has the same issue. where if the rows are not placed next to each other, and some are instead nested, they do not share width data. Due to time constraints, I'm having to just switch to using divs with preset widths.
经过进一步测试，我发现使 div 表现得像表一样的 css 样式具有相同的问题。如果行没有彼此相邻放置，而有些行是嵌套的，则它们不共享宽度数据。由于时间限制，我不得不切换到使用具有预设宽度的 div。
To anyone else who may come along, there might be some possibility when using treeTables, but I have not yet tested it out and am needing to move on.
对于可能出现的其他任何人，使用treeTables时可能有一些可能性，但我尚未对其进行测试，我需要继续前进。
回答by Giona
You can use CSS and divs to emulate tables, with display:table;, display:table-row;, display:table-cell;etc.
您可以使用CSS和div的效仿表，用display:table;，display:table-row;，display:table-cell;等。
HTML:
HTML：
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action 1</div>
<div class="cell">Action 2</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Ann</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
</div>
?CSS:
？CSS：
.table {
display:table;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
}
Supported by IE8+(it's a CSS2.1 feature)
支持 IE8+（这是一个 CSS2.1 特性）
Further reading:
进一步阅读：
回答by KatieK
One option is that you can nest a tableinside a td:
一种选择是您可以将tablea嵌套在 a 中td：
<table>
<thead>
<tr>
<th>Outer Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob's information
<table>
<thead>
<tr>
<th>Inner Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe's information</td>
</tr>
<tr>
<td>Sue's information</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Ann's information</td>
</tr>
</tbody>
</table>
PS - Mind your table structure - you can't skip tds or ths.
PS - 注意你的表结构 - 你不能跳过tds 或ths。
