时间戳

首页 > 解决方案 > Bulma 表格行不跨越全宽

css - Bulma 表格行不跨越全宽

问题描述

is-fullwidth我的angular7 应用程序中有一个Bulma 表，工作正常。但是现在我需要在每一行内添加一个角度组件，并且td标签位于该组件内。但是当我这样做时，表格行不会跨越它的全宽。

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <app-table-row [details]="row">
      </app-table-row>
    </tr>
  </tbody>
</table>

table-row.component.html

<td>
  <div *ngIf="!showField"> {{ details.name }} </div>
  <div *ngIf="showField" class="field">
    <div class="control">
      <input [value]="details.name" class="input" type="text">
    </div>
  </div>
</td>

<td>{{ details.address }}</td>

这将输出以下内容 输出图像

如果我删除角度分量并td正常添加 s，它会正确跨越。像这样。 正确的图像

为什么添加角度分量时不起作用？我应该如何解决它？

标签： cssangularbulma

解决方案

发生这种情况的原因可能是因为td元素不是 的直接子级tr，而是app-table-row组件的子级。

不确定在您的情况下是否有意义，但您可以更改app-table-row组件中的选择器属性以选择tr自身，如下所示：

@Component({
    selector: 'tr[app-table-row]',
    ...
})
export class AppTableRowComponent  {}

并像这样使用它：

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows" app-table-row [details]="row">
    </tr>
  </tbody>
</table>

这种方式app-table-row不是 DOM 中的单独节点。

推荐阅读