CODEWITHSUNDEEP
htmlcssangular
Ka Tech
Ka Tech

Reputation: 9457

Table column width issue

I am using Angular 7+ and trying to build a scheduling table using HTML table. In this table I have a sticky first column which contains the working days and then to the right I have the the hours of day scrolling horizontal.

The sticky first column has a set width so all the days are showing with equal width. The time columns also have smaller set width.

The issue is the width I set are not working ie it's not being displayed with the required width in the html for time. Instead the hrs are fixed to a very small width.

Can anyone help me fixing this? Ps I don't have to use table whatever works. Thanks in advance

Link to a stackblitz of my issue: https://stackblitz.com/edit/angular-7-master-z9sdfl?file=src%2Fapp%2Fapp.component.html

Screenshot below: Table

And finally my code: TEMPLATE

<div>
  <table >
      <tr *ngFor="let day of ['MONDAY', 'TUESDAY', 'WEDNESDAY','THURSDAY', 'FRIDAY']">
        <td style="width:300px" class="sticky canvas side-panel">{{day}}</td>
        <td 
        style="width:200px"
        *ngFor="let col of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" 
        class="time">
          {{col}} 00hrs</td>
      </tr>
  </table>
</div>

CSS

.sticky {
    position: -webkit-sticky; /*safari*/
    position: sticky;
    left:0px;
    background-color:#424242;
}

.canvas {
  background-color:#424242;
    color: white;
}
.time {
  color:black;
  background-color:white;border-right:1px solid red;border-left:1px solid red;
}

Upvotes: 1

Views: 278

Answers (2)

Ijaz Ali
Ijaz Ali

Reputation: 128

When using IE11, this file's css takes priority over the inline style. So, please use style in css. I hope it will work

.sticky
{
   min-width: 200px;
}

Upvotes: 1

Anarno
Anarno

Reputation: 1640

Remove the <div> element inside your <table>, this is the problem. Bind the *ngFor on your <tr> element. Try this.

Upvotes: 2

Related Questions