Break word in table in Edge - html-table

Question

I have a table like this:
<div class="container">
<div class="row">
<div class="col-12">
<table>
<tbody>
<tr>
<td>some content</td>
<td>http://insertreallylongurlhere</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm using this css:
body {word-break: break-word;}
On mobile (or at small screen sizes) on Edge, the long url won't break and overflows off-screen.
It works fine except for in Edge. I know Edge doesn't really like word-break: break-word.
So, I've tried word-wrap: break-word and overflow-wrap: break-word on both the table and on the td. However, it seems like tables don't like that.
If I add table-layout: fixed and a width (such as width: 100%) to my table, the words wrap properly, but the width style breaks my table. It breaks out of my containing div.
Does anyone know another solution to this issue?

Answer 1

Try to use the overflow-wrap: break-word; property, more detail information, please check the overflow-wrap CSS property.
Besides, you could also try to use the word-break: break-all; property, instead of word-break: break-word;
<style>
body {
word-break: break-word;
}
table td {
width: 100px;
word-break:break-all;
}
</style>
<div class="container">
<div class="row">
<div class="col-12">
<table border="1">
<tbody>
<tr>
<td>some content</td>
<td>http://insertreallylongurlhere</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The result like this: