如何在单行中使“显示：表格”显示的多个div

Question

我使用div代替表来显示数据，如下所示。

我想在一行中显示数字，例如1-30，而不是下一行。我的代码是：

<div class="div-table">
    <div class="div-table-row">
        <div class="div-header-col">Levels</div>
        <div *ngFor="let x of dates" class="div-date-col">{{x}}</div>
    </div>
</div>

和CSS：

.div-table {
    display: table;         
    width: auto;         
    background-color: #eee;
    // border-spacing: 5px;
}
.div-table-row {
    display: table-row;
    width: auto;
    clear: both;
}

.div-date-col {
    float: left;
    display: table-column;         
    width: 50px;    
    text-align:  center;
    border: 1px solid black;     
}

.div-header-col {
    float: left;
    display: table-column;         
    width: 200px;         
}

并希望仅对数字列提供滚动显示

Answer 1

如果将.div-table-row中的显示从table-row更改为flex，则会在同一行中显示。

Answer 2

您可以尝试一下。

.div-table {
  background-color: #eee;
}

.div-table-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  clear: both;
}

.div-date-col {
  width: calc(100%/30);
  text-align: center;
  border: 1px solid black;
}

.div-header-col {
  width: 200px;
}

Answer 3

添加“ display：flex; flex-wrap：nowrap” 使其保持在同一行。

<div style="display: flex;flex-wrap:nowrap">   
 <div class="div-table">
     <div class="div-table-row">
            <div class="div-header-col">Levels</div>
            <div *ngFor="let x of dates" class="div-date-col">{{x}}</div>
      </div>
  </div>
</div>

Answer 4

<table>
  <tr >
    <td> Levels</td>
  </tr>
  <tr *ngFor="let x of dates">
    <td class="div-date-col"> {{x}}</td>
  </tr>
</table> 

在此处查看演示Demo