Chrome窗口全屏时,具有固定标题的可滚动表功能丢失

时间:2016-09-06 20:09:53

标签: html css django google-chrome twitter-bootstrap-3

我有一个Django网站,下面显示的CSS会修改我的表格,使其具有固定的标题和可滚动的正文。



@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

.table-fixed > tbody {
  display: block;
  max-height: 600px;
  overflow-y: auto;
}
.table-fixed > thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-fixed > tbody > tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-fixed > thead {
  width: calc(100% - 1em)
}

<div class="col-xs-12">
  <table class="table table-hover table-striped table-condensed table-fixed">
    <thead>
      <tr>
        <th>Head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
      </tr>
      <tr>
        <td>
          3
        </td>
      </tr>
      <tr>
        <td>
          4
        </td>
      </tr>
      <tr>
        <td>
          5
        </td>
      </tr>
      <tr>
        <td>
          6
        </td>
      </tr>
      <tr>
        <td>
          7
        </td>
      </tr>
      <tr>
        <td>
          8
        </td>
      </tr>
      <tr>
        <td>
          9
        </td>
      </tr>
      <tr>
        <td>
          10
        </td>
      </tr>
    </tbody>
  </table>
</div>
&#13;
&#13;
&#13;

这些表可以正常工作并完成他们的工作。当我在Chrome上并使窗口全屏显示时会出现此问题。滚动条消失了。

另一方面,如果我在IE中这样做没有任何改变。我可以将窗口全屏显示,表格仍然有滚动。

在Chrome中导致此问题的任何想法?

0 个答案:

没有答案