表 tr 方向垂直。我能怎么做？

Question

我已经看到 table tr 以水平方式出现。如下：

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="height:100px">
    <td valign="bottom">January</td>
    <td valign="bottom">$100</td>
  </tr>
</table>

我的要求是：

 Month   January
 Savings $100

但是，不能使用以下代码和 CSS - 垂直对齐。 Bcz，我正在使用角度 ngFor，我需要动态显示 1/2/3 列。

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <td valign="bottom">January</td>
  </tr>
  <tr style="height:100px">
    <th>Savings</th>
    <td valign="bottom">$100</td>
  </tr>
</table>

我知道的当前解决方案是：

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <td *ngFor="let i of is">{{i.a}}</td>
  </tr>
  <tr style="height:100px">
    <th>Savings</th>
    <td *ngFor="let i of is">{{i.b}}</td>
  </tr>
</table>

这里需要多次写ngFor。我用 div 和 css 做到了这一点，但我需要动态相同高度的所有行单元格 - 我没有看到这一点。如何使用 CSS 垂直显示表格 tr？

Answer 1

请您尝试以下方式，它似乎工作正常。

#vertical thead,#vertical tbody{
    display:inline-block;
 }
 
#vertical thead tr th {
    text-align: left;
}

<table id="vertical">
	<thead>
		<tr>
			<th colspan="3">Month</th>
		</tr>
		<tr>
			<th colspan="3">Savings</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>January</td>
		</tr>
		<tr>
			<td>$100</td>
		</tr>
	</tbody>
</table>

谢谢！