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

Asked

Viewed 12,979 times

6

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

Below follows the HTML and CSS 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>

html css html5 css3
  • 1

    I did https://jsfiddle.net/vqfmrj1x/1/, but I suspect it’s not quite what you want... Or is it?

  • No, tbody would have to be below thead, and caption is Fixed as well.

  • That way I’ve tried too.

2 answers

14


Change the display of thead and of tbody for block, set the maximum element size tbody and modify the property overflow-y for 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 content with table header.

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

Complete 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>

  • Thanks, it’s practically what I want, but the thead is misaligned, in relation to tbody.

0

To solve this problem I applied the following solution:

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

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

Set a size for the .table td and .table th with at least 15% size inside the table, so that they do not differ in size from each other:

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

And as the colon 4 is a little larger, set a size of 150px:

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

And finally, to define the tbody as follows, leaving it as a height block element of 300px and width of 100% inside the table, and to show the scrollbar set the property overflow as auto, to show both the left and the bottom scrollbar 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>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.