html - 如何在div内放入表格

Question

我已经阅读了很多答案，但是我还没有找到如何做自己想做的事情。

我想显示4个图形，如下所示：


  g1 g2
  
  g3 g4


然后，如果我减少窗户，它应该是反应性的：


  11
  
  22
  
  33
  
  44


有我的表的HTML：

              <table class="tableChart">
                <tr>
                  <td>{{> chart chart_id=this.idChartMem}}</td>
                  <td>{{> chart chart_id=this.idChartCPU}}</td>
                </tr>
                <tr>
                  <td>{{> chart chart_id=this.idChartNet}}</td>
                  <td>{{> chart chart_id=this.idChartDisk}}</td>
                </tr>
              </table>

而且没有CSS，因为我找不到如何制作它。我已经测试了display: inline-block;，但是它什么也没改变

[EDIT]跟随答案，结果为

Answer 1

而不是表，为此使用简单的div。使用display: table-*，并且当视口太小时，将display: table-cell更改为display: block;。

要检查视口大小，请使用@media媒体查询。

.table {
  display: table;
}
.table .row {
  display: table-row;
}
.table .td {
  display: table-cell;
  padding: 20px;
  border: 1px solid #ddd;
}

/** not needed if using media queries from below. Only for demo **/
.table.narrow .td {
  display: block;
}

/*****

@media (max-width: 500px) {
   .table .td {
      display: block;
   }
}

******/

Wide view:
<br/>
<div class="table">
  <div class="row">
    <div class="td td1">1</div>
    <div class="td td2">2</div>
  </div>
  <div class="row">
    <div class="td td3">3</div>
    <div class="td td4">4</div>
  </div>
</div>

<hr/>Narrow view:
<br/>
<div class="table narrow">
  <div class="row">
    <div class="td td1">1</div>
    <div class="td td2">2</div>
  </div>
  <div class="row">
    <div class="td td3">3</div>
    <div class="td td4">4</div>
  </div>
</div>