html - 如何在 HTML 的单行数据单元格中显示多个数据？

Question

我想显示一个表格，如下所示。

但是，我得到的是：

如何在 HTML 的单行数据单元格中显示多个数据？可以在 HTML 本身中完成吗？

谢谢

我的代码：

<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">
      <div style="padding-top: 5px; width: 100%">
           <td>{{ greenColor }} [{{ farmFruitsNum[a].length }}]</td>
      </div> 

      <td>
           <div
            *ngFor="let fruits of farmFruitsNum[a]; let b = index">
             {{ fruits }}
           <div class="asteriskSymbol"
            [ngStyle]="{
             display:b == farmFruitsNum[a].length - 1 ? 'none' : 'block'}">
            *
            </div>
            </div>
         </td>
    </tr>
</table>

标签： htmlcssangulartypescript

Answer 1

试着把它变成<thead>and <tbody>。

尝试这个：

<h1>Color of Fruits</h1><table> 
<thead>
    <tr>
        <th>Color of Fruits</th>  <th>Types of Fruits</th>
    </tr> 
</thead></table>


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