Question

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

我想显示4个这样的图表：

g1 g2

g3 g4

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

G1

g2

G3

G4

我的桌子有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。使用array[] = {2,2,2,5,7,4}，当视口太小时，请将display: table-*更改为display: table-cell。

要检查视口大小，请使用display: block;媒体查询。

＆＃13;

@media

＆＃13;

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

＆＃13;

Answer 2

您可能需要添加媒体查询来处理分页屏幕宽度：

在<head>标记中添加：

<meta name='viewport' content='width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1' />

然后在你的CSS文件中添加：

@media only screen and (min-device-width: 240px) and (max-device-width:    
768px) {

    .tableChart td {

        display: block;

    }

}

你可以改变最小值和最小值。根据您的需求设置最大设备宽度。

如何在div中安装表格

2 个答案: