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

Posted 2023-03-05

【中文标题】Angular：每个 tr 元素内有两行的 HTML 表

【英文标题】：Angular: HTML table with two rows inside each tr element

【发布时间】：2021-09-11 20:50:19

【问题描述】：

显然这里已经回答了这个问题：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 -- ]

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

【参考方案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>

【讨论】：

你不用加那么多<th>。在 CSS 中访问时可能会产生误导，因为表格应该只有一个 <th> 理想情况下

@anirudh 表行内不同的表，不同的表具有不同的表头。那是我的推理。用户可以根据自己的需要进行更改。

这似乎有点多余。看看我的答案一次

感谢@SuryanshSingh 的回复！不幸的是，这确实使用了嵌套表（有点），这是我希望避免的。特别是如果rows 包含三个以上的元素，您可以立即看到代码将如何混乱。

@MariosYiannakou 我对角度一无所知，但我一直在寻找这个问题我遇到了这个答案，他们在哪里模拟 css 中的 colspan：***.com/a/3109087/15387341

【参考方案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 来加粗该子文本和一行

【讨论】：

是的，这似乎比我正在寻找的要多得多......不过看看你的代码，这在 Angular 框架中是如何实现的？ *ngFor 会转到第一个 <tr>，然后呢？第二个<tr> 包含跨越三列的<td> 将需要一个单独的*ngFor，并且不会按照我的意思结束。除非我将它们都封装在 <div> 中……但这听起来很奇怪。

如果这个答案可以帮助您将其标记为对未来的开发人员是正确的。如果有任何进一步的疑问，请告诉我，我很乐意为您提供帮助:)

仅限于 HTML 和 CSS 是什么意思？我在原始问题中包含了我在角度框架中使用它的问题？但这是我用来希望以我的最终答案为基础的内容，因为这是非常好的信息。

对不起，我猜您没有将您的问题标记为 angular，这造成了混乱。其实老实说，我对角度没有太多的想法。对此感到抱歉

完全没问题！并不是说你的答案无关紧要。