Consegui reduzir o espaço na vertical, quando o <form> está dentro de um <tr>

[Frank K Hosaka]

Eu uso a classe 'table table-striped' do Bootstrap, ele monta tabela bem distribuida, alterando a cor de uma linha para outra.

O problema é o espaço entre as linhas. Isso não é problema no notebook que tem 14 polegadas, mas é no celular.

Semana passada, eu descobri o CSS line-height:0 que reduz a linha para o tamanho do texto.

Mas ele não funciona quando um controle do tipo <form> estiver no meio do caminho. Hoje descobri a solução:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<meta name=viewport content='width=device-width'>
<table class='table table-striped w-25 m-0 m-auto mt-5' style=line-height:0>
  <tr><td><form style=margin-top:-8;margin-bottom:-8><input></form>
  <tr><td>Teste
  <tr><td>Teste
</table>

 

[Frank K Hosaka]

Encontrei um problema com o <input type=submit>, o CSS style="margin-top:-8px;margin-bottom:-8px" simplesmente "esmaga" o controle. A solução que eu encontrei foi "margin-top:-7px;margin-bottom:-7px;height:20px".

[Frank K Hosaka]

Encontrei outro problema, dessa vez com o <input type=date>. A minha lista de CSS ficou assim:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<style> 
.linha {line-height:0}
.linhaDate {line-height: 14}
.menos {margin-top:-8px;margin-bottom:-8px}
.mais {height:20px}
</style>
<meta name=viewport content='width=device-width'>
<table class='table table-striped w-25 m-0 m-auto mt-5'>
  <tr class=linha><td><form class=menos><input></form>
  <tr class=linha><td>Teste
  <tr class=linha><td>Teste
  <tr class=linha><td><input class='menos mais' type=submit>
  <tr class=linhaDate><td><input class=menos type=date value='2023-12-06'>
</table>