表格列宽问题

Question

我正在使用 Angular 7+ 并尝试使用 HTML 表构建调度表。在此表中，我有一个粘性第一列，其中包含工作日，然后在右侧我有一天中的小时数水平滚动。

粘性第一列有一个固定的宽度，所以所有的日子都以相同的宽度显示。时间列的设置宽度也较小。

问题是我设置的宽度不起作用，即它没有在 html 中以所需的宽度显示一段时间。相反，小时固定在一个非常小的宽度上。

谁能帮我解决这个问题？ Ps 我不必使用 table 任何工作。提前致谢

链接到我的问题的堆栈闪电： https://stackblitz.com/edit/angular-7-master-z9sdfl?file=src%2Fapp%2Fapp.component.html

截图如下：

最后是我的代码： 模板

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

Answer 1

删除<table> 中的<div> 元素，这就是问题所在。在 <tr> 元素上绑定 *ngFor。 Try this.

Answer 2

使用 IE11 时，此文件的 css 优先于内联样式。所以，请在 css 中使用样式。我希望它会工作

.sticky
{
   min-width: 200px;
}