Angular：每个 tr 元素内有两行的 HTML 表

Question

显然这里已经回答了这个问题：Generating Two Table Rows With *ngFor

我正在尝试实现一个 HTML 表格，其 tr 元素每个都有两个可用行。我正在将它与使用 Angular 框架和引导程序的应用程序集成。我想避免嵌套表格，因为它们真的很乱。

我想这样做的原因是，我可以将所有字段放在第一行，然后第二行显示为空，但会在适当的时候填充成功/错误消息。

<!-- Example code -->
<table>
  <thead>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
  </thead>
  <tbody>
    <tr *ngFor="row in rows">
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

每个tr 看起来像这样：

[Field 1] [Field 2] [Field 3]

我想要实现的是每个tr 看起来像这样：

[Field 1] [Field 2] [Field 3]
[ - second row inside tr -- ]

编辑： 包括我希望实现的图表

Answer 1

也许你可以这样做：

<table border="2">
  <caption> Demo table</caption>
  <thead>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
  </thead>
  <tbody>
    <tr>
      <thead>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
      </thead>
  <tbody>
    <tr>
      <td colspan="3"> -- second row inside tr -- </td>
    </tr>
  </tbody>
  </tr>
  <tr>
    <thead>
      <th>Field 1</th>
      <th>Field 2</th>
      <th>Field 3</th>
    </thead>
    <tbody>
      <tr>
        <td colspan="3"> -- second row inside tr -- </td>
      </tr>
    </tbody>
  </tr>
  </tbody>
</table>

Answer 2

您可以将colspan="3" 用于<td> 作为潜台词，如下所示-

代码

 table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
 }

 
 #subtext {
 text-align:center;
 }

  <table>
      <thead>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
      </thead>
      <tbody>
        <tr>
          <td>Name1</td>
          <td>Name2</td>
          <td>Name3</td>
        </tr>
        <tr id="subtext">
          <td colspan="3"> Subtext </td>
        </tr>
        <tr>
          <td>Name4</td>
          <td>Name5</td>
          <td>Name6</td>
        </tr>
        <tr id="subtext">
          <td colspan="3"> Subtext </td>
        </tr>
      </tbody>
    </table>

您可以使用 CSS 来加粗该子文本和一行