Overflow hidden not working in FF & IE

Question

I have overflow on the x-axis that I'm trying to hide in a container of display:table. The overflow is hidden in Chrome and Safari. As the title suggests, however, this is not happening in FF & IE 11.

My fiddle: https://jsfiddle.net/z6wLnsas/1/

I have tried both overflow: hidden and overflow-x: hidden, but the issues still persists in the identified browsers.

Answer 1

For some reason, the overflow properties do not work on tables. Instead, try putting your table( or div with display: table) in another div.

Something like

<div id='container'>
    <div id='my-table-div'>
    Random content
    </div>
</div>

Then put the overflow property on the container.