How to insert a scrollbar inside the th element of a table?

Asked

Viewed 22 times

0

I would like to fix the cell size of the table, and if the information contained exceeded this limit, a scrollbar would appear only to the specific cell, allowing the user to see all the information, but keeping the fixed size set earlier. My code is currently like this:

<table  class="tabela">
            
            <tr class="titulo">
                <th>Nome</th>
                <th>Sobrenome</th>
                <th>Endereço</th>
                <th>Tel. do familiar</th>
                <th>Nome do familiar</th>
                <th>Crimes cometidos</th>
                <th>Duração da pena</th>
                <th>Data da prisão</th>
                <th>Ação</th>

            </tr>

            
            <% lista.forEach(function(user){ %>
            
            <tr>
                <th> <%= user.nome %></th>
                <th> <%= user.sobrenome %> </th>
                <th> <%= user.endereco %> </th>
                <th> <%= user.tel_familiar %> </th>
                <th> <%= user.nome_familiar %> </th>
                <th> <%= user.crimes_cometidos %> </th>
                <th> <%= user.duracao_pena %> </th>
                <th> <%= user.dia_aprisionamento %> </th>
                <th>

                    <form method="post">
                        <input type="submit" name="botao" value="Editar">
                        <input type="submit" name="botao" value="Excluir">
                        <input hidden type="text" name="id" value="<%= user.id %>">
                    </form> 
                        
                </th>
                
                
            </tr>
            <% }) %>
            
        </table>

The CSS file looks like this:

.tabela, th{
  border: 3px solid black;
  border-collapse: collapse;
  margin:auto;
}

.tabela th{
    width:5%;
}

.tabela{
    max-width: 95%;
    margin-top:1%;
}

.titulo{
    font-size: 16px;
    background-color:rgb(20, 20, 20);
    color:white;
}

form input[type=submit]{
    margin:5px;
}
html css

1 answer

1


It’s simple, but you have to have a div within the TD, is in the div that you will set the maximum height (max-height) and the overflow

inserir a descrição da imagem aqui

I made the simplest of the simple, I didn’t touch the CSS, but maybe you want to take the padding of TD, for div take up all the space, put the style inline even in the first cell

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .tabela,
  th {
    border: 3px solid black;
    border-collapse: collapse;
    margin: auto;
  }

  .tabela th {
    width: 5%;
  }

  .tabela {
    max-width: 95%;
    margin-top: 1%;
  }

  .titulo {
    font-size: 16px;
    background-color: rgb(20, 20, 20);
    color: white;
  }

  form input[type=submit] {
    margin: 5px;
  }
</style>
</head>

<body>

  <table class="tabela">

    <tr class="titulo">
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Endereço</th>
      <th>Tel. do familiar</th>
      <th>Nome do familiar</th>
      <th>Crimes cometidos</th>
      <th>Duração da pena</th>
      <th>Data da prisão</th>
      <th>Ação</th>

    </tr>




    <tr>
      <th>
        <div style="width: 100%; max-height: 50px; overflow-y: auto;">
          <%= user.nome %>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam necessitatibus quo eveniet fuga consequuntur, qui, ducimus minima eum asperiores exercitationem ipsa consectetur, id nostrum perferendis vero modi! Esse, dolor!</p>
        </div>
      </th>
      <th> <%= user.sobrenome %> </th>
      <th> <%= user.endereco %> </th>
      <th> <%= user.tel_familiar %> </th>
      <th> <%= user.nome_familiar %> </th>
      <th> <%= user.crimes_cometidos %> </th>
      <th> <%= user.duracao_pena %> </th>
      <th> <%= user.dia_aprisionamento %> </th>
      <th>

        <form method="post">
          <input type="submit" name="botao" value="Editar">
          <input type="submit" name="botao" value="Excluir">
          <input hidden type="text" name="id" value="<%= user.id %>">
        </form>

      </th>


    </tr>


  </table>

</body>

</html>

  • 1

    Thanks bro! I put here in css and html and is working well.

  • 1

    @atlas250 without problems man, I am happy to have helped!

Browser other questions tagged html css

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