CODEWITHSUNDEEP
htmlcsshtml-table
Peteris
Peteris

Reputation: 3756

How to allow rotated div to overflow table cell?

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

Upvotes: 2

Views: 829

Answers (1)

brains911
brains911

Reputation: 1310

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.

Upvotes: 4

Related Questions