在 table 中变换旋转

Question

我 table 看起来像这样：

而当我使用 transform: rotate(-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>

在 table 中变换旋转

Transform rotate in th table

css

html-table

css-transforms