Line break in HTML table

Asked

Viewed 1,520 times

0

I would like to know how 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>
html breakpoints

  • At first the tag input has no closing tag </input>.

  • Yuri wasn’t very clear, you want to break the line inside the input, you want to break Thead’s line, you want to break it into other lines?

1 answer

1

Breaking rows in a table responsibly is complicated because the table structure itself does not allow this.

You could add a display: block to cells causing each one to occupy a different line, but I don’t think the result will be very good, see:

You need to full-screen view 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 screen resolution. Just add in 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 tag <input> has no tag for closing </input>.

Browser other questions tagged html breakpoints

You are not signed in. Login or sign up in order to post.