html - 如何让旋转的div溢出表格单元格？

Question

我有一个表格单元格，其 div 高度为 3px，宽度大于单元格宽度。我正在使用 transform:rotate 并使用 div 来表示旋转的线。

即使我使用table-layout:fixed，div 也会水平拉伸(stretch)表格单元格。如果单元格不适合，我希望它覆盖表格。

<table style="table-layout:fixed">
  <tr>
    <td style="width:20px;">
      <div style="width: 100px;
                  height: 3px;
                  background: #000;
                  transform: rotate(20deg);"></div>
    </td>
    <td style="width:100px;">Why am I pushed away?</td>
  </tr>
</table>

附注我在实际代码中使用正确的供应商前缀进行轮换

Answer 1

向 div 添加 position:absolute 可能正是您想要的？

接受的答案: 另一方面，我没有立即注意到，为了使用 table-layout:fixed 你需要指定表格本身的宽度。在你的情况下，我认为你会希望它的分辨率为 120px，这样就可以满足你的需要。