How to limit the number of rows in an HTML table

Asked

Viewed 3,123 times

1

I’m doing a database listing screen and showing the results in an HTML table, it’s all working, but I would like to limit the number of lines displayed by five to stay all on the same screen and the scrolling is done in the table itself. Follows the code:

 <table class="table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Nome</th>
                      <th>E_mail</th>
                      <th>Tipo</th>
                      <th>Opções</th>
                  </thead>
                  <tbody>
                   <?php  while($reg=$listar->fetch_array()){
                   echo "<tr>";
                      echo "<td>".$reg['id_usuario']."</td>
                      <td>".$reg['nome_professor']."</td>
                      <td>".$reg['nome_usuario']."</td>
                      <td>".$reg['tipo']."</td>
                      <td>
                      <a class='btn btn-primary'  name='deletar'><i class='fa fa-fw fa-lg fa-times-circle-o text-danger'></i></a>
                      </td>
                      <td><a class='btn btn-primary'><i class='fa fa-edit fa-fw fa-lg'></i></a> </td>";
                    "</tr>";
                     }
                      ?>
                    </tbody>
                </table>
php html

  • A simple alternative would be to add the content inside an iframe, limit its size and place the scrollbar inside it

1 answer

1


You don’t necessarily have to worry about the number of rows, but the maximum size your table can have. It is possible to set a maximum size to the table body and if this limit is exceeded add a scroll bar, I made a quick example here, see if it meets your need:

<html>
<head>
    <style type="text/css">
        table, td, th {
            border: solid 1px;
            border-collapse: collapse;
        }
        thead, tbody {
            display: block;
            width: 130px;
        }
        tbody {
            height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Coluna 1</th>
                <th>Coluna 2</th>                
            </tr>
        </thead>
        <?php for ($i = 0; $i < 30; $i++): ?>
            <tr>
                <td>Valor 1</td>
                <td>Valor 2</td>
            </tr>
        <?php endfor; ?>
    </table>
</body>
</html>

Browser other questions tagged php html

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