相关疑难解决方法(0)

我有一个角度组件，我想在带有 ngFor 的表格中使用它，但它破坏了表格布局。我的桌子看起来像：

<table class="table table-stripped">
  <thead>
    <th style="width: 30%;">Network</th>
    <th style="width: 10%;">Quantity</th>
    <th style="width: 30%;">Supplier</th>
    <th style="width: 30%;">Conn Type</th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let prod of opportunity.products; let i = index;">
      <app-product-row [product]="prod"></app-product-row>
    </tr>
  </tbody>
</table>

子组件如下所示：

<td style="width: 30%;">
...
</td>
<td  style="width: 10%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td>
...
</td>

但所有子组件都放置在第一个 td 元素中，因为 Angular 放入 <app-product-row ...> 标记，这意味着这些组件无法正确渲染。我尝试将 app-product-row 放在 tr 本身中，但这也不起作用。

我怎样才能让它正确渲染表格？

我正在尝试创建一个类似于附加屏幕截图中显示的表。该表的数据来自 python 脚本，但我需要在 HTML 端输入一些关于如何创建可以跨越多行的表的输入

由于我对 HTML 知之甚少，我尝试使用以下代码创建表格，但它看起来不像预期的那样工作。如果有人能对这里可能出现的问题有所了解，那将非常有帮助

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}

<table style="width:100%">
  <table>
    <tr>
      <th>Project</th>
      <th>Environment</th>
      <th>Data1</th>
      <th>Multiple Data</th>
    </tr>
    <tr>
      <td rowspan="4">project1</td>
      <td rowspan="4">prod</td>
      <td rowspan="4">project1data</td>
      <td rowspan="4">project1 multi row data1</td>
      <td rowspan="4">project1 multi row data2</td> …