#StackBounty: #google-chrome #bootstrap-4 TD an TH with relative position, breaking out of overflow: scroll parent in Chrome

Bounty: 50

This started recently I think, and only seems to be an issue in chrome. The table-responsive class is supposed to contain the table, for scrolling when there’s overflow, but in chrome the td/th elements are flowing out of the container.

enter image description here

Here is the HTML:

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

</div>
Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

</div>
Header
# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
</div> </div> </div>

And the CSS:

td, th {
  position: relative;
}

I’ve also reproduced it here in a pen:

https://codepen.io/anon/pen/xopXxm


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.