HTML and CSS table overflow not working - html

Question

I'm trying to make an table with an auto overflow, but that doesn't seem to work.
What I have now:
<div class="panel-group col-sm-offset-1 col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-folder-open-o fa-fw"></i>
<strong>Chatbox</strong>
</div>
<div id="forum4" class="panel-collapse collapse in" style="height:248px;">
<div class="table-responsive">
<table class="table table-hover" style="overflow:auto;max-height:248px;">
<thead>
<tr>
<th style="width:5%"></th>
<th style="width:81%;"></th>
<th style="width:5%;"></th>
<th style="width:8%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Robin</b></td>
<td>Hier komt dan het bericht :D</td>
<td class="text-right"><small><i class="fa fa-warning" style="color: #CA2B2B;"></i></small></td>
<td class="text-right"><small>16 aug 18:51</small></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
That gives me the perfect thing I want, except when it needs an overflow.
Because when it needs an overflow, it just keeps going, without any overflow.
When I add display:block to the table then it does have an overflow (auto) but the table is shorter (http://prntscr.com/85c09y). That is the problem I want to be fixed, that the table looks like this: http://prntscr.com/85c1u6
I want to have overflox y to be fixed, not overflow x!

Answer 1

UPDATE:
The red outline is the table, the blue dashed outline is the div containing the table, and the black dotted outline is the rest of the layout.
<div class="panel-group col-sm-offset-1 col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-folder-open-o fa-fw"></i>
<strong>Chatbox</strong>
</div>
<div id="forum4" class="panel-collapse collapse in" style="height:248px;">
<div class="table-responsive" style="display:block;overflow:auto;max-height:248px;">
<table class="table table-hover">
<thead>
<tr>
<th style="width:5%"></th>
<th style="width:82%;"></th>
<th style="width:5%;"></th>
<th style="width:8%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Robin</b></td>
<td>Hier komt dan het bericht :D</td>
<td class="text-right"><small><i class="fa fa-warning" style="color: #CA2B2B;"></i></small></td>
<td class="text-right"><small>16 aug 18:51</small></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Fix is the code above.
The style="display:block;overflow:auto;max-height:248px;" needed to be standing in the table-responsive class, not the table table-hover class