How to decrease Bootstrap table height?

Question

How to decrease Bootstrap table height?

Navigation

#1 by (0 votes)

1

Sirs,

I made a table in bootstrap, but I want to decrease the height of the line, Is it possible to change directly from the table or do I need to tweak it in bootstrap.css?

<tableclass="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>

tabela

asked by anonymous 31.08.2018 / 06:08

1 answer

Calculate items in a table TypeError: items.map is not a function

score 0 · Accepted Answer

According to the documentation you should use the table-sm class in your table. link

Add .table-sm to make tables more compact by cutting cell padding in half.

In PT: Add .table-sm to make the tables more compact, reducing the percentage of% cells by half.

See what's 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>