html - 在 transform=rotate () 上添加了不必要的/幽灵填充

Question

旋转table和td元素时，添加了一个我无法删除的未知填充。盒子模型不显示任何填充。请帮我修复它。

下面是我的代码，它导致旋转时出现未知填充

table {
  transform: rotate(270deg);
  direction: rtl;
  height: 400px;
}

.peopleNames {
  width: 400px;
}

.peopleNames h2 {
  text-align: center;
}

.innerDiv th,
td {
  text-align: center;
  padding-right: 50px;
  transform: rotate(90deg);
}

<div class="peopleNames">
  <h2>Folow the data to know the requirement</h2>
  <div class='innerDiv'>
    <table>
      <thead>
        <tr>
          <th>
            <h1>1</h1>
          </th>
          <th>
            <h1>2</h1>
          </th>
          <th>
            <h1>3</h1>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jill do the work within given time</td>
          <td>Smith is the best </td>
          <td>50min is all you got</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button>Search</button>
</div>

标签： htmlcsscss-transforms