Как разрешить повернутый div переполнить ячейку таблицы?

Question

У меня есть ячейка таблицы с div, которая имеет высоту 3 пикселя и ширину больше ширины ячейки. Я использую transform: rotate и использую div для представления повернутой линии.

Даже если я использую table-layout:fixed, div растягивает ячейку таблицы по горизонтали. Я хочу, чтобы он перекрывал таблицу, если он не помещается в ячейку.

<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>

P.S. Я использую правильные префиксы поставщиков для ротации в реальном коде

Answer 1

Добавление position:absolute в div может быть тем, что вы ищете?

Принятый ответ: С другой стороны, кое-что, что я не уловил сразу, чтобы использовать макет таблицы: исправлено, вам нужно указать ширину самой таблицы. В вашем случае, я думаю, вы бы хотели, чтобы это было в 120px, и это достигло бы того, что вам нужно.