0

Gostaria de saber como posso fazer para quebrar a linha nesta tabela na versão mobile do site (@media screen and (max-width: 550px)):

<div>
<table>
<thead><tr>
<th>Qnd. (ex: 01 un)</th>
<th>Comp. (ex: 1,2m)</th>
<th>Larg. (ex: 2,0m)</th>
<th>Alt. (ex: 1,5m)</th>
<th>Peso (ex: 3,0 kg)</th>
</tr></thead>

<tbody>
<tr>
<td><input type="text" onchange="calc()"></input></td>
<td><input type="text" onchange="calc()"></input></td>
<td><input type="text" onchange="calc()"></input></td>
<td><input type="text" onchange="calc()"></input></td>
<td><input type="text" onchange="calc()"></input></td>
<td><button onclick="this.parentElement.parentElement.outerHTML='';calc();">X</button></td>
</tr>
</tbody>
</table>
</div>
2
  • A princípio a tag input não tem tag de fechamento </input>.
    – Sam
    Commented 16/04/2018 às 13:05
  • Yuri não ficou muito claro, vc quer quebrar a linha dentro do input, quer quebrar as linha da THead, p que vc que dividir em outras linhas?
    – hugocsl
    Commented 16/04/2018 às 13:16

1 Resposta 1

1

Quebrar linhas em uma tabela de forma responsiva é complicado porque a própria estrutura da tabela não permite isso.

Você poderia adicionar um display: block às células fazendo com que cada uma ocupe uma linha diferente, mas não creio que o resultado fique muito bom, veja:

É preciso visualizar em tela cheia e redimensionar a janela para menos de 550px.

@media screen and (max-width: 550px){
  td, th{
    display:block;
  }
}
<div>
<table>
<thead><tr>
<th>Qnd. (ex: 01 un)</th>
<th>Comp. (ex: 1,2m)</th>
<th>Larg. (ex: 2,0m)</th>
<th>Alt. (ex: 1,5m)</th>
<th>Peso (ex: 3,0 kg)</th>
</tr></thead>

<tbody>
<tr>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><button onclick="this.parentElement.parentElement.outerHTML='';calc();">X</button></td>
</tr>
<tr>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><button onclick="this.parentElement.parentElement.outerHTML='';calc();">X</button></td>
</tr>
</tbody>
</table>
</div>

Como a sua tabela não possui muitas colunas (apenas 6), minha sugestão é torná-la responsiva, se auto-ajustando à resolução da tela. Basta adicionar no CSS input: width: 100%;:

input{
   width: 100%;
}
<div>
<table>
<thead><tr>
<th>Qnd. (ex: 01 un)</th>
<th>Comp. (ex: 1,2m)</th>
<th>Larg. (ex: 2,0m)</th>
<th>Alt. (ex: 1,5m)</th>
<th>Peso (ex: 3,0 kg)</th>
</tr></thead>

<tbody>
<tr>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><button onclick="this.parentElement.parentElement.outerHTML='';calc();">X</button></td>
</tr>
<tr>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><input type="text" onchange="calc()"></td>
<td><button onclick="this.parentElement.parentElement.outerHTML='';calc();">X</button></td>
</tr>
</tbody>
</table>
</div>

Uma correção no seu código, é que a tag <input> não possui tag de fechamento </input>.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .