如何通过CSS为几个div标记创建一个表？

Question

我有一个带有6个<div>标记的页面，并且无法访问这个page.So的Html，我尝试为这些字段创建一个带有page.So的表。

请看附图：

​

对于4个字段，Html代码如下所示：

我的HTML代码类似于我的站点中的以下内容:

<div class="group">
<h3>
<span>title-group</span>
</h3>
<div class="field-1">
<div class="field-label">field-1</div>
<div class="field-items">
<div class="field-item even">11111111</div>
<div class="field-item odd">2222222222222222</div>
<div class="field-item even">333333333333</div>
</div>
</div>
<div class="field-2">
<div class="field-label">field-2</div>
<div class="field-items">
<div class="field-item even">1111111111111111111111111</div>
<div class="field-item odd">22222222222222222222</div>
<div class="field-item even">333333333333333333333333333333333</div>
</div>
</div>
<div class="field-3">
<div class="field-label">field-3</div>
<div class="field-items">
<div class="field-item even">11111111111111111111111111111111111111111111</div>
<div class="field-item odd">222222222222222222222222222222222</div>
<div class="field-item even">3333333333333333333333333333333</div>
</div>
</div>
<div class="field-4">
<div class="field-label">field-4</div>
<div class="field-items">
<div class="field-item even">
<span class="file">fiele</div>
<span class="file">fiele</div>
</div>
</div>
</div>

我使用css浮动这些标记并创建一个表，但是每个单元格对于内容都有不同的高度，我希望单元格具有相同的高度(字段项)。我可以添加height:100px;，但是如果A单元格的内容超过100 on，我的表就会被破坏，我想把的高度设置为左右两个字段，等于表中间的两个字段，，.beacause，这两个中间字段的内容与不同的高度是不同的。我使用的CSS：

    .field {
  display: table;
}
.field-items {
  display: table-row;
}
.field-item {
  display: table-cell;
  padding: 15px 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.field-item:first-child {
  border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
  border-top: 1px solid #000;
}

添加后的新图片：

​

​

请帮帮我。

Answer 1

如果要使用表，为什么不使用table标记而不是div

但是，如果您想使用div，您可以更改CSS使其“成为”一个表。

​

.field-1 {
  display: table;
}
.field-items {
  display: table-row;
}
.field-item {
  display: table-cell;
  padding: 15px 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.field-item:first-child {
  border-left: 1px solid #000;
}
.field-items:first-child .field-item {
  border-top: 1px solid #000;
}

<div class="field-1">
  <div class="field-items">
    <div class="field-item">test</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
  </div>
</div>

​

使用3行和3列进行更新

​

.field {
  display: table;
}
.field-items {
  display: table-row;
}
.field-item {
  display: table-cell;
  padding: 15px 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.field-item:first-child {
  border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
  border-top: 1px solid #000;
}

<div class="field">
  <div class="field-items">
    <div class="field-item">test</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
  </div>
</div>
<div class="field">
  <div class="field-items">
    <div class="field-item">test</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
  </div>
</div>
<div class="field">
  <div class="field-items">
    <div class="field-item">test</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
    <div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
  </div>
</div>

​