Question

I have a table cell with a div that has a height of 3px and a width more than the cell width. I am using transform: rotate and using the div to represent a rotated line.

Even though I am using table-layout:fixed, the div stretches the table cell horizontally. I want it to overlay the table if it does not fit in the cell.

<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. I am using the right vendor prefixes for rotation in the actual code

Answer 1

Adding position:absolute to the div might be what you’re looking for?

Accepted Answer:
On another note, something I didn’t catch right away, in order to use table-layout:fixed you need to specify a width on the table itself. In your case i think you would want it at 120px and that would accomplish what you need.