引导表行不适合 headerrow (Angular)

Question

我在 Angular 中使用 Bootstrap 表时遇到问题： 我的<td> 标签不适合我的表头中相应的<th>：我不确定，是否是由于我调用模板呈现<td> 引起的：

这是我的代码：

 <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Students</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
    <tr *ngFor="let c of tests">
      <app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>

    </tr>
    </tbody>
  </table>

这就是被调用的组件（<app-preview-container>）：

<td>
  {{name}}
</td>
<td>
  {{description}}
</td>
<td>
  {{count}}
</td>
<td>
  some buttons
</td>

有没有人告诉我如何解决这个问题？我已经尝试了很多使用引导宽度参数，如 w-xx 或 col-md-x 或 col-x 或使用 scope="col"/"row"。但是这些都没有解决它。

Answer 1

当您更改 <tr> / <td> 显示属性时，表格通常看起来是这样。 HTML 表格有自己独特的显示属性display: table-row; 和display: table-cell;。

你要么已经这样做了，要么用额外的 div 包装了你的 <td>s。

您可以在控制台中检查您的表，并检查<td>s 是否是<tr> 的直接子级，然后手动将<tr> 和<td> 显示属性设置为table-row 和table-cell。

破表示例：

td {
  border: 1px solid gray;
}

*[style] {
  outline: 2px dashed red;
}

<table>
  <tr>
    <td>
      Column 1
    </td>
    <td>
      Column 2
    </td>
    <td>
      Column 3
    </td>
  </tr>
  <tr>
    <tr style="display: block;">
      <td>
        Broken
      </td>
      <td>
        Row
      </td>
      <td>
        !
      </td>
    </tr>
    <tr>
      <td style="display: inline-block;">
        Broken td
      </td>
      <td>
        !
      </td>
      <td>
        !
      </td>
    </tr>
    <tr>
      <td>
        Correct
      </td>
      <td>
        row
      </td>
      <td>
        !
      </td>
    </tr>
</table>