Bootstrap modal overflowing my table row

I am not sure if the issue is resolved or not but my solution is :

Append the below written CSS tag into your fiddle and get the thing done.

.modal-body {
  overflow-x: auto;
}

You can find my JSFiddle here.

I know its too late but this is what worked for me

Wrapped the table inside a div and added overflow:auto as a style

<div style="overflow: auto">
       <table class="table table-hover">

            <thead>
                <tr >
                   <th id="th1">Header 1</th>
                   <th id="th2">Header 2</th>
                </tr>
            </thead>

             <tbody>

             </tbody>

          </table>
</div>

Table tries it's best to fit the contents within the container, but if your text is too long it will be forced to override the container's width and spread. You can force it to still re-size within the container using table-layout:fixed but it will cause undesirable formatting like this.

If you have lengthy headers, I recommend you to follow the vertical header approach which looks like:

<tbody>
    <tr>
        <th>Heading 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Heading 2</th>
        <td>Value 2</td>
    </tr>
</tbody>

Have a look at the formatting I made here on your code.