Table overflow scroll css doesn't work

Question

Here is some kinda complicated html table formatting I have: http://jsfiddle.net/nyCKE/8517/

The problem is that the "Subject Areas" table does not work when I try to do overflow scroll. It has a height set to 200px, but when I add many rows to the table, it doesn't stay at 200, it just keeps extending the table. As you can see on the jsfiddle, I have tbody set to overflow-y scroll (I want the thead to be fixed). But, it refuses to scroll. The "Classes" table has no data so it stays at 200px. That is what I want the height of the subject areas table to be, but clearly it is bigger. Here is some of the relevant css:

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

Another thing I forgot to mention is I have 2 div's, one for left and one for right. The left div contains the subjects and classes tables. The right div contains the overview. This is for when the window is bigger and by extending the window in the fiddle, you can see that the overview table goes to the right, which is what I want. I am not sure if these div's mess up the tbody scrolling.

Does anyone know how to solve my problem?

Dalin Huang · Accepted Answer · 2017-04-24T19:10:36.693

Bug in your css:

tbody {
   overflow-y scroll;
}

should be:

tbody {
   overflow-y: scroll;
}

Solution to your problem: define your height directly at `child` and use `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 http://jsfiddle.net/dalinhuang/m05z29cm/1/ this one? — Dalin Huang, Apr 24 '17 at 19:07

score 2 · Answer 2 · answered Apr 24 '17 at 18:57

You can wrap the table in a container and give the height and overflow to the container.

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>

thanks, the only problem is that I want the thead to be fixed. So, I don't want the title and search bar to scroll. — rishubk, Apr 24 '17 at 18:59
@rishubk why are you using a table? You can do this easily with flexbox. — Michael Coker, Apr 24 '17 at 19:04
oh I'm fairly new to html/css, what is a flexbox? would it be easy to change this design to use a flexbox? — rishubk, Apr 24 '17 at 19:05
@rishubk tables are old school and a pain to work with, and technically this isn't semantic as it isn't tabular data. Here's how I would do it using flexbox http://jsfiddle.net/nyCKE/8519/ — Michael Coker, Apr 24 '17 at 19:11

Table overflow scroll css doesn't work

2 Answers2

Solution to your problem: define your height directly at child and use display: block

Solution to your problem: define your height directly at `child` and use `display: block`