如何设置像表一样的div（每个SharePoint附加的示例）？

Question

如何根据附加的图像将一组相关的div设置为一个表格？ THX！

 <div class="collection"
    <div class="group">
      <div class="label">Label1</div>
      <div class="value">Value1</div>
    </div>
    ... repeats n times
</div>

免责声明：此特定的html输出是自动生成的，我无法控制生成的内容。我只是有div工作，我想相应的风格。

Answer 1

对不起伙计们，但是，浮动的是什么？

虽然你们都试图取消你认为OP 需要的东西，但问题的答案实际上是

.collection {display:table}
.group {display:table-row}
.label, .value {display:table-cell}

Answer 2

我相信

.label {
  width: 200px;
  float: left;
}

（除了其他造型）将为你做的事情。

Answer 3

<强> HTML

<div class="collection">
    <div>
      <div class="label">Label1</div>
      <div class="value">Value1</div>
    </div>
    <div>
      <div class="label">Label1</div>
      <div class="value">Value1</div>
    </div>
</div>

CSS

.label { float:left; width:200px; border-top:1px solid #ccc; }
.value { margin-left:200px; background:#fffced; border-top:1px solid #ccc; }

代码：http://jsfiddle.net/wWGG8/1/

Answer 4

我只想用一张桌子。您可以阅读HTML here中的表格<tr>标记定义表格行。 <td>标记定义表数据。每个<td>标记都是一个新列。

<table>
<tr><td>This is the table data</td><td>This is more table data in the same row</td></tr>
<tr><td>Here is another row</td><td>This is more table data in the second row</td></tr>
</table>

Answer 5

是的，你可以使用一张桌子。这在语义上很方便。

尽管如此，您仍可以坚持使用当前的HTML结构。

只需为具有宽度的label和value类分配div，然后将它们浮动到左侧。

您可能还需要为类group指定div的高度。