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

HTML和CSS表溢出不起作用

1 个答案: