我想根据记录及其内容在 html 中创建一个动态的 2 列 table

Question

我有一堆内容。我想做一个动态的table。也可以使用 DIV。我想循环我的数组，我希望数据像这样显示。

它应该会自动调整 table 的数量和高度，因为我必须在 DOMPDF 中使用它。

CSS 列计数的属性不起作用，所以我想解决这个问题，我将奖励 50 赏金给帮助我解决这个问题的人。

Answer 1

这是一个基本的解决方案： HTML

<div class='wrapper cf'>

  <div class='col-left'>
    <div class='one'></div>
    <div class='two'></div>
    <div class='foo'></div>
    <div class='type'></div>
  </div>
  <div class='col-right'>
    <div class='oneone'></div>
    <div class='twotwo'></div>
    <div class='foofoo'></div>
    <div class='typetype'></div>
  </div>

</div>

和CSS：

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.wrapper{
  width:400px;
  height:auto;
  min-height:100px;
  border:1px solid #000;
 box-sizing: border-box;
}
.col-left,.col-right{
  width:50%;
  float:left;
  min-height:100px;
}
.col-right{float:right;}
.one{border:1px solid #000;width:100%;height:20px;}
.two{border:1px solid #000;width:100%;height:25px;}
.foo{border:1px solid #000;width:100%;height:120px;}
.type{border:1px solid #000;width:100%;height:80px;}

.oneone{border:1px solid #000;width:100%;height:40px;}
.twotwo{border:1px solid #000;width:100%;height:35px;}
.foofoo{border:1px solid #000;width:100%;height:120px;}
.typetype{border:1px solid #000;width:100%;height:110px;}

.col-left div:last-child,.col-right div:last-child{border-bottom:none;}

我只给固定高度举例。

cf class 被 gallagher site 拍摄。

要以动态方式实现此结果，您可以使用例如 foreach 函数来循环数组。

我想根据记录及其内容在 html 中创建一个动态的 2 列 table

I want to make a dynamic 2 columned table in html based on the record and its content

html

css

dompdf

column-count