如何在HTML表格的单个行数据单元格内展示多条数据

现有代码的渲染异常是因为HTML结构不符合规范：<tr> 标签的直接子元素只能是 <th> 或 <td>，你在 <tr> 下直接嵌套 <div> 会触发浏览器的异常渲染逻辑，导致最终效果不符合预期。

实现单个单元格展示多条数据的方法 #

<td> 本身就是合法的块级容器，要在单个单元格内展示多条数据，直接在 <td> 内部放置多条内容即可，需要换行分隔的话可以用两种方案：

• 用块级元素（如 <div>、<p>）包裹每条内容，块级元素默认独占一行
• 每条内容之间添加 <br> 换行标签

仅用HTML本身完全可以实现该需求，不需要依赖任何框架或脚本。

修正后的代码（Angular版本） #

<h1>Color of Fruits</h1>

<table class="GFtable"> 
  <tr>
    <th>Color of Fruits</th>
    <th>Types of Fruits</th>
  </tr>

  <tr *ngFor="let greenfruits of farmFruits; let a = index">
    <td style="padding-top: 5px; width: 100%">
      {{ greenColor }} [{{ farmFruitsNum[a].length }}]
    </td>
    <td>
      <ng-container *ngFor="let fruits of farmFruitsNum[a]; let b = index">
        <div>{{ fruits }}</div>
        <div 
          class="asteriskSymbol"
          [ngStyle]="{display: b == farmFruitsNum[a].length - 1 ? 'none' : 'block'}"
        >
          *
        </div>
      </ng-container>
    </td>
  </tr>
</table>

纯HTML实现示例 #

<table border="1">
  <tr>
    <th>Color of Fruits</th>
    <th>Types of Fruits</th>
  </tr>
  <tr>
    <td>Green [3]</td>
    <td>
      <div>Green Apple</div>
      <div>*</div>
      <div>Avocado</div>
      <div>*</div>
      <div>Kiwi</div>
    </td>
  </tr>
  <tr>
    <td>Red [2]</td>
    <td>
      <div>Strawberry</div>
      <div>*</div>
      <div>Cherry</div>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Ralph