Bootstrap responsive image in table fails in IE11 - image

Question

I have a table cell that includes an image that should be 50% of the cell's width.
The code works in Chrome, Firefox, and Edge, but in IE11 instead of taking on 50% of the cell's width, large images just take on 50% of their native size.
Here is a fiddle using a 800px wide image. Works fine except in IE11, where the image displays as 400px wide instead of responsive:
https://jsfiddle.net/43Tesseracts/9knqerj7/4/
Here is the relevant html with bootstrap:
<td>
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
style="max-width:50%;"
>
The image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</td>
There appear to be many similar issues on SE, but they are all much older, or use an older version of Bootstrap. I'm using Bootstrap 3.3.7

Answer 1

there is no need for extra div's. you can set the following css property on the table element:
table{
table-layout: fixed;
}
i updated your fiddle with a working example:
https://jsfiddle.net/9knqerj7/10/
(in addition, i changed the img to be a block element and float left, but that is not required for the responsiveness - just looks better IMHO)

Answer 2

You could solve this issue using divs like i did here:
<td>
<div style="display: flex;">
<div style="width: 50%">
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
</div>
<div style="width: 50%">
THe image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</div>
</div>
</td>
Working solution: https://jsfiddle.net/9knqerj7/8/