CODEWITHSUNDEEP
htmlcssangular6
Vithushan
Vithushan

Reputation: 513

How to make multiple div of "display: table" display in single row

Im using div instead of table to display data as shown below.enter image description here

I want to display the numbers in one row say 1-30 rather than breaking to next line. My code is:

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

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

And want to make the scroll available only for the number columns

Upvotes: 1

Views: 1314

Answers (4)

harkesh kumar
harkesh kumar

Reputation: 883

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

Check here demo Demo

Upvotes: 0

Ra&#250;l &#193;lvarez Hinojosa
Ra&#250;l &#193;lvarez Hinojosa

Reputation: 71

If you change your display in .div-table-row from table-row to flex you get the display in the same row.

Upvotes: 1

Richard Pariath
Richard Pariath

Reputation: 160

Add "display:flex; flex-wrap:nowrap" to keep it on the same row.

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

Upvotes: 0

silpa jacob
silpa jacob

Reputation: 76

You can try out this.

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

Upvotes: 0

Related Questions