html - 表 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，我正在使用 Angular 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>

谢谢!