1

以下に示すように、テーブルの代わりにdivを使用してデータを表示します。ここに画像の説明を入力

次の行に分割するのではなく、1 行から 30 までの数字を 1 行に表示したい。私のコードは次のとおりです。

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

そして、スクロールを数値列でのみ使用できるようにしたい

4

4 に答える 4

1

.div-table-row の表示を table-row から flex に変更すると、同じ行に表示されます。

于 2018-10-16T08:42:30.987 に答える
0

これを試すことができます。

.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;
}
于 2018-10-16T08:38:15.637 に答える
0

「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>
于 2018-10-16T08:38:44.657 に答える