How to decrease Bootstrap table height?

Asked

Viewed 3,182 times

1

Sirs,

I made a table in bootstrap, but I want to decrease the height of the line, It is possible to change directly from the table or I need to adjust in bootstrap.css? inserir a descrição da imagem aqui

 <table class="table table-striped table-hover table-bordered " >
      <thead>

        <tr style="background-color: #CEF6EC">
          <th>ID</th>
          <th>Nome Fornecedor</th>
          <th class="d-none d-sm-table-cell">Contato</th>
          <th class="d-none d-lg-table-cell">Telefone</th>
          <th width="100" class="text-center">Ações</th>
        </tr>
      </thead>
      <tbody>

        <?php
        $sql = "SELECT id,nome,con,tel FROM cad_for WHERE del <> '1'";

        $sql = $pdo->query($sql);

        If($sql->rowCount()>0){
          foreach($sql->fetchAll() as $fornecedor){
            ?>

            <tr>
              <td><?php echo $fornecedor['id']; ?></td>
              <td><?php echo $fornecedor['nome']; ?></td>
              <td class="d-none d-sm-table-cell"><?php echo $fornecedor['con']; ?></td>
              <td class="d-none d-lg-table-cell"><?php echo $fornecedor['tel']; ?></td>

              <td>
                <a href="cad_for_vis.php?id=<?php echo $fornecedor['id']; ?>" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="left" title="Visualizar"><i class="fas fa-eye"></i></a>
                <a href="cad_for_edi.php?id=<?php echo $fornecedor['id']; ?>" class="btn btn-outline-warning btn-sm" data-toggle="tooltip" data-placement="left" title="Editar cadastro"><i class="fa fa-fw fa-edit"></i></a>
              </td>
            </tr>

            <?php
          }
        }
        ?>

      </tbody>
    </table>
table
  • 1

    If you can post a snippet of the code, it helps to visualize the problem

  • It depends a lot on the CSS and HTML you have in it. It may be that these buttons in the last column are "sending" at line height. You would want to see the code.

  • Inform which version of Bootstrap you are using also help (it is important)

  • 1

    Without the substantial part of the code, the Bootstrap version is difficult for anyone to understand...As stated in the second comment can be the buttons. If you go to Bootstrap v4 you can use the class table-Sm which reduces filling by half

  • It is made in bootstrap 4.

  • I put the code of the table

Show 1 more comment

2 answers

1


According to the documentation you must use the class table-sm on your table. https://getbootstrap.com/docs/4.0/contenttables/#small-table

Add .table-sm to make Tables more Compact by Cutting Cell padding in half.

In EN: Add .table-sm to make tables more compact, reducing the padding half-cell.

See how it looks in the example

	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<table class="table table-sm table-striped table-hover table-bordered " >
<thead>

	<tr style="background-color: #CEF6EC">
	<th>ID</th>
	<th>Nome Fornecedor</th>
	<th class="d-none d-sm-table-cell">Contato</th>
	<th class="d-none d-lg-table-cell">Telefone</th>
	<th width="100" class="text-center">Ações</th>
	</tr>
</thead>
<tbody>

	<?php
	$sql = "SELECT id,nome,con,tel FROM cad_for WHERE del <> '1'";

	$sql = $pdo->query($sql);

	If($sql->rowCount()>0){
	foreach($sql->fetchAll() as $fornecedor){
		?>

		<tr>
		<td><?php echo $fornecedor['id']; ?></td>
		<td><?php echo $fornecedor['nome']; ?></td>
		<td class="d-none d-sm-table-cell"><?php echo $fornecedor['con']; ?></td>
		<td class="d-none d-lg-table-cell"><?php echo $fornecedor['tel']; ?></td>

		<td>
			<a href="cad_for_vis.php?id=<?php echo $fornecedor['id']; ?>" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="left" title="Visualizar"><i class="fas fa-eye"></i></a>
			<a href="cad_for_edi.php?id=<?php echo $fornecedor['id']; ?>" class="btn btn-outline-warning btn-sm" data-toggle="tooltip" data-placement="left" title="Editar cadastro"><i class="fa fa-fw fa-edit"></i></a>
		</td>
		</tr>

		<?php
	}
	}
	?>

</tbody>
</table>

  • That’s right, with the "table-Sm" worked. Thank you very much.

  • @Fábio glad it worked out there, tmj

-1

The tip I saw above is good. A good practice, do not directly change bootstrap.css, create another css that loads after bootstrap.css, in it, if you change for example: table tr { padding : 1px} this will cause you to override the definition of the previously loaded file. Avoid making too many changes, study the bootstrap classes well and use the most suitable or list of classes for an element. Overwrite definitions last and in a general file.

Browser other questions tagged table

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