表溢出滚动css不起作用[重复]答案

【问题标题】：Table overflow scroll css doesn't work [duplicate]表溢出滚动css不起作用[重复]
【发布时间】：2017-09-21 14:00:17
【问题描述】：

这是我拥有的一些复杂的 html 表格格式： http://jsfiddle.net/nyCKE/8517/

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

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

我忘了提到的另一件事是我有 2 个 div，一个用于左侧，一个用于右侧。左侧 div 包含主题和类表。右侧 div 包含概述。这是为了当窗口更大并且通过在小提琴中扩展窗口时，您可以看到概览表向右移动，这就是我想要的。我不确定这些 div 是否会扰乱 tbody 滚动。

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

【问题讨论】：

标签： html css html-table overflow

【解决方案1】：

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

【讨论】：

嗯，好像没用：/
@rishubk jsfiddle.net/dalinhuang/m05z29cm/1这个？
对不起，你是对的。谢谢！
@rishubk 酷=D

【解决方案2】：

您可以将表格包装在容器中并将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>

【讨论】：

谢谢，唯一的问题是我希望修复标题。所以，我不希望标题和搜索栏滚动。
@rishubk 你为什么用桌子？您可以使用 flexbox 轻松做到这一点。
哦，我对 html/css 还很陌生，什么是 flexbox？将这种设计更改为使用 flexbox 会很容易吗？
@rishubk 表是老派的，使用起来很痛苦，从技术上讲，这不是语义，因为它不是表格数据。下面是我如何使用 flexbox jsfiddle.net/nyCKE/8519
哦，好兄弟，谢谢！

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

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