Jump to content
Fórum Script Brasil
  • 0

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


Frank K Hosaka

Question

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>

 

Screenshot_20231205-224253_Samsung Internet.jpg

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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>

 

Screenshot_20231206-133913_Samsung Internet.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...