HTML and CSS table overflow not working

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><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></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><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></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