I’m making a calculator using button tag and i only want to change the width of one button with id=equal but when i change it’s width, spaces are added between third and fourth button at each row and the width of my table changes too. Here’s my html and css code
table {
border: 1px solid rgb(180, 172, 172);
background-color: aliceblue;
margin-left: auto;
margin-right: auto;
border-spacing: 6px;
border-radius: 1rem;
outline: none;
-webkit-box-shadow:0px 10px 39px 10px rgba(62,66,66,0.22);
-moz-box-shadow: 0px 10px 39px 10px rgba(62,66,66,0.22);
box-shadow: 0px 10px 39px 10px rgba(62,66,66,0.22);
}
#result {
margin-top: 5px;
height: 11vh;
width: 350px;
background-color: #E8E8E8;
border: 1px solid #E8E8E8;
border-radius: 5rem;
}
input[type="button"] {
width: 60px;
height:9vh;
background-color: #E8E8E8;;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5rem;
}
#equal {
width: 140px!important;
}<table id="calc">
<tr>
<td colspan="4"><input type="text" id="result"></td>
</tr>
<tr>
<td><input type="button" id="AC"></td>
<td><input type="button" id="C"></td>
<td><input type="button" id="%"></td>
<td><input type="button" id="/"></td>
</tr>
<tr>
<td><input type="button" id="7"></td>
<td><input type="button" id="8"></td>
<td><input type="button" id="9"></td>
<td><input type="button" id="x"></td>
</tr>
<tr>
<td><input type="button" id="4"></td>
<td><input type="button" id="5"></td>
<td><input type="button" id="6"></td>
<td><input type="button" id="-"></td>
</tr>
<tr>
<td><input type="button" id="1"></td>
<td><input type="button" id="2"></td>
<td><input type="button" id="3"></td>
<td><input type="button" id="+"></td>
</tr>
<tr>
<td><input type="button" id="0"></td>
<td><input type="button" id="."></td>
<td><input type="button" id="equal"></td>
</tr>
</table>I removed width tag and tried to do the same thing with padding but with that, the buttons at the top changed their width.
>Solution :
In your Table you have 4 cols, but your last row has only 3 cols.
You just have to add colspan=2 to your last tag.
Change
<td><input type="button" id="equal"></td>
to
<td colspan=2><input type="button" id="equal"></td>
Then your Code is working.