How to remove padding (cellpadding) from the <td> element? - html

Question

I am building a simple calculator using HTML, CSS, and JS. My question is how to remove the padding of the element inside my calculator table.
Visuals
To remove spacing between elements in HTML, googling suggests adding the attributes cellspacing="0" cellpadding="0" to the element, which I did. It also suggests adding a CSS selector table { border-collapse: collapse}. However, border-collapse does not work as I expected: the padding does not get removed, and the table corners become wrecked.
/* Global CSS */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--calc-bg: rgb(184, 243, 216);
--btn-bg: rgb(252, 246, 230);
--active-btn-bg: rgb(106, 200, 153);
--main-btn-bg: rgb(71, 202, 143);
--text-color: rgb(45, 53, 44);
--display-bg: rgb(252, 246, 230);
}
/* Calculator CSS */
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght#900&display=swap');
.calculator {
font-family: 'Source Code Pro', monospace;
font-weight: 900;
padding: 10px;
border-radius: 2em;
height: 580px;
width: 500px;
margin: auto;
background-color: var(--calc-bg);
border: solid rgb(45, 52, 42) 5px;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
.display-box {
background-color: var(--display-bg);
border: solid black 0.5px;
color: black;
border-radius: 1em;
width: 100%;
height: 80px;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
#btn {
background-color: var(--main-btn-bg);
}
th,
td {
padding: 0;
}
td {
text-align: center;
vertical-align: middle;
}
input[type=button] {
font-weight: 900;
background-color: var(--btn-bg);
color: var(--text-color);
border: solid rgb(45, 52, 42) 2px;
width: 4rem;
border-radius: 10%;
height: 4rem;
outline: none;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
input:active[type=button] {
background: var(--active-btn-bg);
transition-duration: 100ms;
transition-timing-function: ease-out;
<table class="calculator" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
} ```

Answer 1

Changing the width and height of the table and its elements, along with using border-collapse: collapse and border-spacing: 0 helped to solve the issue