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>
.
input
não tem tag de fechamento</input>
.