EN VI

Html - Changing width of a button creates spaces between other buttons?

How to Html - Changing width of a button creates spaces between other buttons

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>

<td colspan=2><input type="button" id="equal"></td>

Then your Code is working.