Table 溢出滚动 css 不起作用

Table overflow scroll css doesn't work

这里有一些有点复杂的 html table 格式： http://jsfiddle.net/nyCKE/8517/

问题是当我尝试溢出滚动时 "Subject Areas" table 不起作用。它的高度设置为 200px，但是当我向 table 添加许多行时，它不会保持在 200，它只是不断扩展 table。正如您在 jsfiddle 上看到的那样，我将 tbody 设置为 overflow-y 滚动（我希望修复 thead）。但是，它拒绝滚动。 "Classes" table 没有数据，所以它保持在 200px。这就是我想要的主题区域 table 的高度，但显然它更大。下面是一些相关的 css:

tbody {
   overflow-y scroll;
}
.subjects{
    width:100%;
    height: 200px;
}
.classes {
    width:100%;
    height: 200px;
    margin-top: 5px;
}

我忘了说的另一件事是我有 2 个 div，一个在左边，一个在右边。左侧 div 包含主题和 类 table。右侧 div 包含概述。这是为了当window更大的时候，通过在fiddle中扩展window，你可以看到概览table向右移动，这就是我想要的.我不确定这些 div 是否会扰乱 tbody 滚动。

有谁知道如何解决我的问题？

你可以把table包在一个容器里，然后把height和overflow给容器。

body {
  background: #6CD3F8;
  /*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
  background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}

h3 {
  color: white;
  text-align: left;
  margin-top: 20px;
}

.scan {
  padding: 0% 10%;
}

table {
  background: #E0F7FE;
}

table,
.tableContainer {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

table td,
table td * {
  vertical-align: top;
}

tbody {
  overflow-y scroll;
}

th {
  color: #265C82;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 17px;
  padding-left: 5px;
  padding-top: 5px;
}

td {
  padding-left: 10px;
}

::-webkit-input-placeholder {
  color: #00B2F3;
}

.search {
  color: #00B2F3;
  border: 0px solid red;
  border-radius: 10px;
  width: calc(100% - 10px);
  height: 35px;
  margin-top: 5px
}

.select {
  width: calc(100% - 10px);
}

.icon {
  width: 20px;
  height: 20px;
  margin: 2px 8px 0px 5px;
  float: left;
}

hr {
  border-color: #00B2F3;
  margin: 3px 0;
  width: calc(100% - 5px);
}

.subjectsContainer {
  height: 200px;
  overflow: scroll;
}

.subjects {
  width: 100%;
}

.classes {
  width: 100%;
  height: 200px;
  margin-top: 5px;
}

.sections {
  width: 100%;
  height: 405px;
}

.left {
  width: 50%;
  float: left;
  margin-right: 5px;
  margin-bottom: 3%;
  min-width: 300px;
}

.right {
  width: calc(50% - 10px);
  float: left;
  min-width: 300px;
  margin-bottom: 3%;
}

.mid {
  width: 100%;
  text-align: center;
  float: left;
  position: relative;
}

.wrapper {
  width: 100%;
  text-align: right;
  float: left;
  position: relative;
}

.logo {
  max-width: 30%;
  margin: 10px 0px;
}

.links > a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  padding: 0px 10px;
}

.links {
  /*padding-left: 100px;*/
  padding-bottom: 10px;
}

<body>

  <div class="scan">

    <h3>Summer Session A</h3>

    <!-- <div class="left">
   left
  </div> -->

    <!-- <div class="right">
   right
  </div> -->

    <div class="left">
      <div class="subjectsContainer tableContainer">
        <table class="subjects">
          <thead>
            <tr>
              <th>
                <div>Subject Areas</div>
                <hr>
              </th>
            </tr>
            <tr>
              <th>
                <input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Computer Science</td>
            </tr>
            <tr>
              <td>Mathematics</td>
            </tr>
            <tr>
              <td>Engineering</td>
            </tr>
            <tr>
              <td>Computer Science</td>
            </tr>
            <tr>
              <td>Mathematics</td>
            </tr>
            <tr>
              <td>Engineering</td>
            </tr>
            <tr>
              <td>Computer Science</td>
            </tr>
            <tr>
              <td>Mathematics</td>
            </tr>
            <tr>
              <td>Engineering</td>
            </tr>
            <tr>
              <td>Computer Science</td>
            </tr>
            <tr>
              <td>Mathematics</td>
            </tr>
            <tr>
              <td>Engineering</td>
            </tr>
            <!-- <select class="form-control" id="exampleSelect1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select> -->
            <!-- <tr>
         <td>
          <select class="form-control select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>
     </tr> -->

          </tbody>
        </table>
      </div>

      <table class="classes">
        <thead>
          <tr>
            <th>
              Classes
              <hr>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="right">
      <table class="sections">
        <thead>
          <tr>
            <th>
              Overview
              <hr>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>








</body>

您的 css 中的错误：

tbody {
   overflow-y scroll;
}

应该是：

tbody {
   overflow-y: scroll;
}

您问题的解决方法：直接在child定义您的身高并使用display: block

   tbody {
      overflow-y: scroll;
      display: block;
      height: 200px;
    }


body {
  background: #6CD3F8;
  /*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
  background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}

h3 {
  color: white;
  text-align: left;
  margin-top: 20px;
}

.scan {
  padding: 0% 10%;
}

table {
  background: #E0F7FE;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

table td,
table td * {
  vertical-align: top;
}

tbody {
  overflow-y: scroll;
  display: block;
  height: 200px;
}

th {
  color: #265C82;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 17px;
  padding-left: 5px;
  padding-top: 5px;
}

td {
  padding-left: 10px;
}

::-webkit-input-placeholder {
  color: #00B2F3;
}

.search {
  color: #00B2F3;
  border: 0px solid red;
  border-radius: 10px;
  width: calc(100% - 10px);
  height: 35px;
  margin-top: 5px
}

.select {
  width: calc(100% - 10px);
}

.icon {
  width: 20px;
  height: 20px;
  margin: 2px 8px 0px 5px;
  float: left;
}

hr {
  border-color: #00B2F3;
  margin: 3px 0;
  width: calc(100% - 5px);
}

.subjects {
  width: 100%;
  height: 200px;
}

.classes {
  width: 100%;
  height: 200px;
  margin-top: 5px;
}

.sections {
  width: 100%;
  height: 405px;
}

.left {
  width: 50%;
  float: left;
  margin-right: 5px;
  margin-bottom: 3%;
  min-width: 300px;
}

.right {
  width: calc(50% - 10px);
  float: left;
  min-width: 300px;
  margin-bottom: 3%;
}

.mid {
  width: 100%;
  text-align: center;
  float: left;
  position: relative;
}

.wrapper {
  width: 100%;
  text-align: right;
  float: left;
  position: relative;
}

.logo {
  max-width: 30%;
  margin: 10px 0px;
}

.links > a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  padding: 0px 10px;
}

.links {
  /*padding-left: 100px;*/
  padding-bottom: 10px;
}

<body>

  <div class="scan">

    <h3>Summer Session A</h3>

    <!-- <div class="left">
   left
  </div> -->

    <!-- <div class="right">
   right
  </div> -->

    <div class="left">
      <table class="subjects">
        <thead>
          <tr>
            <th>
              <div>Subject Areas</div>
              <hr>
            </th>
          </tr>
          <tr>
            <th>
              <input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Computer Science</td>
          </tr>
          <tr>
            <td>Mathematics</td>
          </tr>
          <tr>
            <td>Engineering</td>
          </tr>
          <tr>
            <td>Computer Science</td>
          </tr>
          <tr>
            <td>Mathematics</td>
          </tr>
          <tr>
            <td>Engineering</td>
          </tr>
          <tr>
            <td>Computer Science</td>
          </tr>
          <tr>
            <td>Mathematics</td>
          </tr>
          <tr>
            <td>Engineering</td>
          </tr>
          <tr>
            <td>Computer Science</td>
          </tr>
          <tr>
            <td>Mathematics</td>
          </tr>
          <tr>
            <td>Engineering</td>
          </tr>
          <!-- <select class="form-control" id="exampleSelect1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select> -->
          <!-- <tr>
         <td>
          <select class="form-control select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </td>
     </tr> -->

        </tbody>
      </table>

      <table class="classes">
        <thead>
          <tr>
            <th>
              Classes
              <hr>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="right">
      <table class="sections">
        <thead>
          <tr>
            <th>
              Overview
              <hr>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>








</body>