表溢出滚动css不起作用

时间：2017-04-24 18:52:57

标签： html css html-table overflow

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

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

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

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

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

2 个答案:

答案 0 :(得分：3)

你的CSS中的错误：

tbody {
   overflow-y scroll;
}

应该是：

tbody {
   overflow-y: scroll;
}

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

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

相关问题
最新问题