Padding needs to be added to the cells of a table, but this is causing overflow issues with text and inputs inside the table. Despite attempting to set box-sizing: border-box, the problem persists.
An example below demonstrates the issue:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
table,
th,
td {
border: 1px solid black;
padding: 1.5%;
}
table {
border-collapse: collapse;
}<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><input value=1></td>
</tr>
</table>When using a padding of 1.5%, the input box extends beyond the right boundary of its cell. If the padding is reduced to 0, then the input box fits properly. The challenge is to maintain the desired padding while ensuring that the input box stays within its cell.