set width of bootstrap popover not working - twitter-bootstrap-3

Question

I am trying to create popovers that contain a table, but the table is being displayed outside of the popover. Trying to adjust the width of the popover content is not solving the problem.
Setting styles for popover-content for width of max-width is not solving the problem. Does anyone know how I can fix this?
$('[data-toggle=popover]').popover({
container: 'body',
html: true,
content: function () {
return $('#popover-content').html();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
<img src="\img\help.png" alt="?" style="width:20px;height:20px;border:0">
</a>
<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
<table style="width: 400px;">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content row 1 col 1</td>
<td>Content row 1 col 2</td>
<td>Content row 1 col 3</td>
<td>Content row 1 col 4</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Please include the css .popover {max-width: 100% !important;}.Once popover on image it will add popover class to desired places. so you need to override the max-width value.
$('[data-toggle=popover]').popover({
container: 'body',
html: true,
content: function () {
return $('#popover-content').html();
}
});
.popover {
max-width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
<img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="?" style="width:20px;height:20px;border:0">
</a>
<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
<table style="width: 400px;">
<thead>
<tr>
<th>heading 1</th>
<th>
heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content row 1 col 1</td>
<td>Content row 1 col 2</td>
<td>Content row 1 col 3</td>
<td>Content row 1 col 4</td>
</tr>
</tbody>
</table>
</div>