Bulma table 行未跨越全宽

Question

我的 angular7 应用程序中有一个 is-fullwidth Bulma table，运行良好。但是现在我需要在每一行内添加一个 angular 组件，并且 td 标签位于该组件内。但是当我这样做时，table 行没有跨越到它的全宽。

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

输出如下

如果我删除 angular 组件并正常添加 tds，它会正确跨越。像这样。

为什么添加angular组件后没有效果？我该如何解决？

Answer 1

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

不确定这对您的情况是否有意义，但您可以将 app-table-row 组件中的 select 或属性更改为 select 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 中的单独节点了。

Bulma table 行未跨越全宽

Bulma table rows not spanning full width

css

angular

bulma

table-row.component.html