I have a DataTable with the headings angled 45 degrees to the right, which puts the right hand column details extending to outside of the table and the contents are truncated/hidden. I have placed the table inside a bootstrap 3 container-fluid. I then set the padding-right to 200px and z-index to 99. However, the contents are still truncated.
Not sure if it’s the entirety of a problem or not but the max width of 0 and use of float (which does lots of weird things which is why it’s rarely used with the advent of flex) aren’t likely doing you any favors.
Be aware that rotating is just a visual transform, and does not affect the width calculation of an element. So you likely need to get the containers the width you want according to the length of the text, rotate, and the adjust width accordingly.
The quadratic equation, or some trig, might be useful for approximating the needed width based on number of characters.