如何通过CSS创建表格对于几个div标签？

Question

我有一个包含6个<div>标签的页面，并且无法访问此页面的Html。所以我尝试使用css为这些字段创建一个表。

请参阅附图：

Html代码对于每4个字段都是这样的：

我的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浮动这些标签并创建一个表，但每个单元格的内容高度不同，我希望单元格的高度相等（field-item）。我可以添加height:100px;，但是如果A单元格的内容超过100px，我的表将会销毁。我想设置左右两边的字段的高度等于表格中间的两个字段。因为这两个中间字段的内容不同，高度不同。 我使用的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;
}

加入CSS后的新图片：

请帮帮我。

Answer 1

如果您想使用表格，为什么不使用table代码而不是div？ 但是如果你想使用div，你可以改变CSS让它成为＆＃34;＆＃34;一张桌子

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用3行和3列进行更新

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;