Преобразовать вращаться в таблице - PullRequest
Новая
       12

Преобразовать вращаться в таблице

0 голосов
/ 09 января 2019

У меня таблица выглядит так:

enter image description here

И когда я использую transform: rotate (-90deg), это будет выглядеть так:

enter image description here

И я хочу, чтобы это было так:

enter image description here

Подскажите, пожалуйста, как это исправить?

1 Ответ

0 голосов
/ 09 января 2019

Добавьте дополнительную обертку и вращайте ее вместо вращения элемента 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>
...