How to apply scrollbar only in the tbody element in an HTML table?

Navigation
4

How to apply scrollbar (scrollbar) only to element tbody , thus leaving element caption and thead fixed in table, without moving when scrollbar moves. >

Below is the HTML and CSS of the table: 

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>
    
asked by anonymous 10.06.2016 / 18:56

2 answers

8

Change the display from thead and tbody to block , set the maximum size of the tbody element, and modify the overflow-y property to scroll . 

thead, tbody{
  display: block;  
}

tbody{
  overflow-y: scroll;
  height: 100px;
  }

It was necessary to specify the size of the columns ( td and th ) to align the contents with the table header. 

.table th,
.table td {
  padding: 5px;
  width:20%;
}

Full Code 

thead, tbody{
  display: block;  
}

tbody{
  overflow-y: scroll;
  height: 100px;
  }

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
  width:20%;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>
    
10.06.2016 / 19:28
0

To solve this problem I applied the following solution:

First set the .table thead tr as a block element and relative position: 

.table thead tr {
  display: block;
  position: relative;
}

Set a size for .table td and .table th with at least 15% of size within the table, so that they do not differ in size from one another: 

.table td,
.table th {
  min-width: 15%;
}

And since colona 4 is a bit larger, set a size of 150px : 

.table td:nth-child(4),
.table th:nth-child(4) {
  width: 150px;
}

And finally, set the tbody as follows, leaving it as a height block element of 300px and width of 100% within the table, and to show the scrollbar set to property overflow as auto , to show both the left and the bottom scrollbar of tbody : 

.table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

Complete solution: 

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}
.table thead tr {
  display: block;
  position: relative;
}
.table td,
.table th {
  min-width: 15%;
}
.table td:nth-child(4),
.table th:nth-child(4) {
  width: 150px;
}
.table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.table tbody tr {
  border-bottom: 1px solid #999;
}
.table tbody tr:hover {
  background-color: #888;
}
.table tbody tr td:hover {
  background-color: #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>
    
10.06.2016 / 21:39
Is it safe to use List with Parallel.ForEach? What does the @Component annotation?