Line break in HTML table

Navigation
0

I would like to know how I can do to break the line in this table in the mobile version of the 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>
    
asked by anonymous 16.04.2018 / 14:50

1 answer

1

Breaking rows into a table responsibly is tricky because the table structure itself does not allow this.

You could add display: block to the cells so that each one occupies a different line, but I do not think the result looks very good, see:

You need to preview in full screen and resize the window to less than 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>

As your table does not have many columns (only 6), My suggestion is to make it responsive, self-adjusting to the screen resolution. Just add in the 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>
  

A fix on your code is that the <input> tag has no tag    </input> closing.

    
16.04.2018 / 15:32
Doubt with Iframe mousemove reset counter jquery