在表中旋转变换

Question

我的桌子看起来像这样：

当我使用transform：rotation（-90deg）时，会像这样：

我希望它像这样：

您能告诉我如何解决此问题吗？

Answer 1

添加一个额外的包装器并旋转它，而不是旋转th元素：

.rotate {
 display:inline-block;
 transform: rotate(-90deg);
}

<table class="second-of-stainless-steel-alloy-classification" style="font-size: 9px; text-align: center;">
	<tr style="background: #f8f8f8">
		<td rowspan="3" colspan="2" style="border-top: hidden; border-left: hidden; background: #fff;"></td>
		<th colspan="8"><strong>ALLOY</strong></th>
	</tr>

	<tr>
		<td colspan="3"><strong>Alloy Components</strong></td>
		<td colspan="5"><strong>Alloy Properties</strong></td>
	</tr>

	<tr style="background: #f8f8f8">
		<td>Chromium
(Cr)</td>
		<td>Molybdenum
(Mb)</td>
		<td>Nickel
(Ni)</td>
		<td>Corrosion
Resistance</td>
		<td>Strength</td>
		<td>Suitable for
Architecture</td>
		<td>Magnetic</td>
		<td>Cost</td>
	</tr>

	<tr style="background: #fff">
		<th rowspan="4" style=" background: purple;"><span class="rotate">STEEL</span></th>
		<td>
			<p style="font-size: 9px; text-align: left;">Ferritic Steel</p>
			<p style="font-size: 9px; text-align: left;">Alloy 409</p>
		</td>
		<td>Low</td>
		<td>None</td>
		<td>Low</td>
		<td>Reduced</td>
		<td>Moderate</td>
		<td>No</td>
		<td>Yes</td>
		<td>Low</td>
	</tr>

	<tr style="background: #f8f8f8">
		<td>
			<p style="font-size: 9px; text-align: left;">Austenitic Steel</p>
			<p style="font-size: 9px; text-align: left;">Alloy 201, 304 and 316</p>
		</td>
		<td>Higher</td>
		<td>Higher</td>
		<td>High</td>
		<td>Relative
to Alloy*</td>
		<td>Relative
to Alloy*</td>
		<td>Yes</td>
		<td>No</td>
		<td>Relative
to Alloy*</td>
	</tr>

	<tr style="background: #fff">
		<td>
			<p style="font-size: 9px; text-align: left;">Martensitic Steel</p>
			<p style="font-size: 9px; text-align: left;">Alloy 410</p>
		</td>
		<td>Higher</td>
		<td>Higher</td>
		<td>Low</td>
		<td>Reduced</td>
		<td>High</td>
		<td>No</td>
		<td>Yes</td>
		<td>Low</td>
	</tr>

	<tr style="background: #f8f8f8">
		<td>
			<p style="font-size: 9px; text-align: left;">Duplex Steel</p>
			<p style="font-size: 9px; text-align: left;">Alloy 2205</p>
		</td>
		<td>High</td>
		<td>Low</td>
		<td>Low</td>
		<td>High</td>
		<td>High</td>
		<td>Yes</td>
		<td>Yes</td>
		<td>High</td>
	</tr>
</table>