Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting width:100% works in my .buttons class but adding height:100% doesn't have any effect at all?
body {
background-image: url("images/background.jpg");
background-color: #cccccc;
}
.square {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 900px;
width: 1200px;
background-color: rgb(255, 255, 255);
outline: 5px solid rgb(0, 0, 0);
}
.calculator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 700px;
width: 500px;
background-color: rgb(255, 255, 255);
outline: 5px solid rgb(0, 0, 0);
border-radius: 5px;
}
input {
width: 100%;
height: 100%
}
table {
width: 501px;
height: 700px;
}<body>
<div class="square">
<div class="calculator">
<form method="post">
<table border="1" width=100%>
<tr>
<td colspan="4">
<input type="text" id="inputbox" />
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="reset" value="RESET" /></td>
<td><input type="submit" name="divide" value="/" /></td>
</tr>
<tr>
<td><input type="submit" name="7" value="7" /></td>
<td><input type="submit" name="8" value="8" /></td>
<td><input type="submit" name="9" value="9" /></td>
<td><input type="submit" name="multiply" value="*" /></td>
</tr>
<tr>
<td><input type="submit" name="4" value="4" /></td>
<td><input type="submit" name="5" value="5" /></td>
<td><input type="submit" name="6" value="6" /></td>
<td><input type="submit" name="minus" value="-" /></td>
</tr>
<tr>
<td><input type="submit" name="1" class="buttons" value="1" /></td>
<td><input type="submit" name="2" value="2" /></td>
<td><input type="submit" name="3" value="3" /></td>
<td><input type="submit" name="add" value="+" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="0" value="0" /></td>
<td><input type="submit" name="point" value="." /></td>
<td><input type="submit" name="result" value="=" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>