HTML 和 CSS 表溢出不起作用

Question

我正在尝试制作具有自动溢出功能的表格，但这似乎不起作用。

我现在所拥有的：

<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>

这给了我想要的完美东西，除非它需要溢出。因为当它需要溢出时，它会继续运行，没有任何溢出。

当我添加display:block时，table它确实有溢出（自动）但表更短（http://prntscr.com/85c09y）。这就是我想要解决的问题，表格如下所示：http : //prntscr.com/85c1u6

我想overflox y被固定，not overflow x！

Answer 1

更新： 红色轮廓是表格，蓝色虚线轮廓是包含表格的 div，黑色虚线轮廓是布局的其余部分。

    <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>

修复是上面的代码。

的style="display:block;overflow:auto;max-height:248px;"需要是站在table-responsive类，而不是table table-hover类