更改按钮的宽度会在其他按钮之间创建空间

Question

我正在使用按钮标签制作计算器，我只想更改 id=equal 的一个按钮的宽度，但是当我更改它的宽度时，每行的第三个和第四个按钮之间会添加空格，并且表格的宽度会发生变化也。这是我的 html 和 css 代码

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>

我删除了宽度标签，并尝试使用填充做同样的事情，但是顶部的按钮改变了它们的宽度。

Answer 1

在你的表格中有 4 列，但最后一行只有 3 列。 您只需将 colspan=2 添加到最后一个标签即可。

改变

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

到

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

那么你的代码就可以工作了。