Tag thead fixed at the top and tbody with scroll bar in table in HTML

Question

Tag thead fixed at the top and tbody with scroll bar in table in HTML

Navigation

#1 by (2 votes)

2

I want a table with the tag thead fixed at the top and tbody with a vertical scroll, I found some solutions that only use CSS, but use the display property, removing the default behavior from the table and making the same as block , making it impossible to use auto-adjustable fields, creating misalignment with the title and data.

dbgrid
{
    text-align: left;
    width: 100%; 
}
.dbgrid table
{
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dbgrid thead
{
    background: #063b53;    
    color: #fff;
    width:100%;
}
.dbgrid tr
{   
    width:100%;
    box-sizing: border-box;
    padding: 3px 10px;
    text-align: left;
    
}
.dbgrid thead tr
{
    color:#fff;
    background:#000;
}
.dbgrid tbody tr
{
    color:#000;
    background:#FFF;
}
/** Testar barra de scroll com height:40px; **/
.dbgrid tbody
{
    width:100%;
    text-align: left;  
    overflow-y: scroll;
    overflow-x: hidden;
    height:40px;
    
  /** ao utilizar display:block funciona, porém perde algumas propriedades da tabela, como alinhar o título da coluna. 
  
  display:block;
  
  **/
    
}

<div class="dbgrid">
    <table>
        <thead>
            <tr>
                <th>Código</th>
                <th>Nome</th>
                <th>Sobrenome</th>
                <th>Endereço</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>João</td>
                <td>Silva</td>
                <td>Avenida Genérica N 12345</td>
            </tr>
            <tr>
                <td>02</td>
                <td>Pedro</td>
                <td>Souza</td>
                <td>Rua Comum N 65478 - Bairro Qualquer</td>
            </tr>
            <tr>
                <td>03</td>
                <td>João</td>
                <td>Paulo</td>
                <td>-</td>
            </tr>
            <tr>
                <td>04</td>
                <td>Maria</td>
                <td>Carvalho</td>
                <td>Avenida Qualquer</td>
            </tr>
        </tbody>
    </table>
</div>

This is the table I have, remove the comment from display:block and then the scroll will work, however the fields will misalign.

Is there a solution? I accept solutions that use pure CSS or Javascript, or some combination of both.

Thank you.

html css

asked by anonymous 18.07.2016 / 04:00

1 answer

Format string qt html charset Laravel - Creating select with Form :: select + Model :: lists

score 2 · Accepted Answer

There are already some solutions to this Renan. Here are some interesting: Using in conjunction with JS:

        // Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

            table.scroll {
                width: 100%; /* Optional */
                /* border-collapse: collapse; */
                border-spacing: 0;
                border: 2px solid black;
            }

            table.scroll tbody,
            table.scroll thead { display: block; }

            thead tr th { 
                height: 30px;
                line-height: 30px;
                /*text-align: left;*/
            }

            table.scroll tbody {
                height: 100px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            tbody { border-top: 2px solid black; }

            tbody td, thead th {
                width: 20%; /* Optional */
                border-right: 1px solid black;
            }

            tbody td:last-child, thead th:last-child {
                border-right: none;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><tableclass="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>

Reference: link

Using pure CSS:

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}

<table class="fixed">
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
      <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
    </tbody>
</table>

Reference: link

Just adapt to your need now. I hope I have helped.