是否可以动态地“移动” HTML表格单元格上下各列？

Question

为此，我正在使用HTML，带有Bootstrap的CSS和AngularJS。

假设我要创建一个具有两个标题列的表，并且条目行分为四列。我将在这些行中添加与对象不同的信息。

让我们假设我们正在显示有关信息的对象是{{Banana}}。标题列为：

“一般信息” | “视觉信息”。

在第一行中，我们需要以下值：

“来源：” | {{Banana.origin}} | “形状”：| {{Banana.shape}}

在下一个输入行中，我们需要以下值：

“生长气候：” | {{Banana.growthClimate}} | “颜色：” | {{Banana.color}}

现在让我们说这个特殊的香蕉实例没有指定形状。 该表仍将保持其结构，只说“形状” | 空单元格。 但是，我想“移动”“颜色”： {{Banana.color}}“到上一行的单元格（即{{Banana.color}}有一个值，如果不从下一行获取相应的两个单元格，等等。）

换句话说，在这种情况下，我希望表格看起来像这样：

“一般信息” | “视觉信息”
“来源：” | {{Banana.origin}} | “颜色”：| {{Banana.color}}
“气候增长” | {{Banana.growthClimate}}

使用HTML，带有Bootstrap的CSS和AngularJS能否实现？

编辑：

此代码不起作用：

`<thead>
     <tr>
         <th class="col-md">General information</th>
         <th class="col-md">Visual information</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td class="col-md">Origin</td>
         <td class="col-md">{{::Banana.origin}}</td>
         <td class="col-md">Shape</td>
         <td class="col-md">{{::Banana.shape}}</td>
     </tr>
     <tr>
         <td class="col-md">Growth climate</td>
         <td class="col-md">{{::Banana.growthClimate}}</td>
         <td class="col-md">Color</td>
         <td class="col-md">{{::Banana.color}}</td>
     </tr>
 </tbody>`

如果此处未定义{{Banana.shape}}，则其单元格将为空。

如果我改为尝试：

`<td class="col-md" ng-show="Banana.shape">Shape</td>
<td class="col-md" ng-show="Banana.shape">{{::Banana.shape}}</td>`

要么

`<td class="col-md" ng-if="Banana.shape">Shape</td>
<td class="col-md" ng-if="Banana.shape">{{::Banana.shape}}</td>`

这些都不起作用，只是调整行的单元格大小。