Question

我已经看到桌子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，我使用的是角度ng，因此需要动态显示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>

谢谢！

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

1 个答案: