Question

使用表格显示处理Angular 2项目。

<table class="table-frame__table">
    <colgroup>
        <col *ngFor="let col of frame.columns"
             [style.max-width.px]="col.width"
             [style.width.px]="col.width">
    </colgroup>
    <tbody>
    <tr *ngFor="let row of frame.layout">
        <td *ngFor="let cell of row"
            (click)="selectCell(cell)"
            class="table-frame__cell"
            rowspan="cell.rowLength"
            colspan="cell.colLength">
            {{ Cell Content Are Populated Here }}
        </td>
    </tr>
    </tbody>
</table>

每列的宽度仅存储在我们模型的列中，单元格本身并不知道它们的宽度是多少？因此，我不能限制td标签或td内容的宽度。

用户可以编辑内容。当他们键入足够的文本时，它会自动扩展整个列的宽度，有没有办法只使用colgroup和col标签来防止这种情况。

我目前的CSS如下：

.table-frame__table {
  display: table;
  table-layout: fixed;
}

.table-frame__content {
  position: relative;
  width: 100%;
  height: 100%;
}

td, th {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.table-frame__cell {
  border: 1px solid #A9A9A9;
  display: table-cell;
}

编辑：找到解决方案。它实际上与td的内容有关，td是使用以下CSS的另一个组件：

:host {
  position: relative;
  display: block;
  white-space: nowrap;
  width: 100%;
}

.table-frame-cell__content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  outline: none;
 }

仅使用colgroup和col限制表列宽度

0 个答案: