Button Borders Issue - html

Question

I'm new into frontend and I have been trying to design a calculator. I used table because I think it is the best option. I used <button> element in order to make it clickable, but when I use the attribute ( border: none or 0) it's not clickable anymore , so what's causing that?
Also I would like to know how to change the button background ( I have tried to inherit it and that works but I don't think this is practical).
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
/* padding: 0; */
/* margin: 0 auto; */
font-size: 2rem;
/* text-align: center; */
background-color: #d8d9db;
}
.wrapper {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 0%;
background-color: black;
}
.screen {
padding: 1rem;
background-color: black;
color: white;
text-align: right;
}
tr {
border: 8px solid black;
text-align: center;
}
td {
/* border: 5px solid red; */
background-color: #d8d9db;
width: 100px;
text-align: center;
margin: 0.5rem;
}
button {
font-size: 3rem;
color: black;
border: 0;
margin: 0;
background-color: inherit;
font-weight: bold;
}
.col4 {
background-color: #df974c;
color: white;
width: 25%;
}
.col4 button {
color: white;
padding: 1rem;
}
.butc {
width: 50%;
background-color: #d8d9db;
padding: 1rem;
}
.but0 {
width: 75%;
background-color: #d8d9db;
padding: 1rem;
}
<div class="wrapper">
<section class="screen">0</section>
<section class="calc-buttons">
<table>
<tbody>
<tr>
<td colspan="2" class="butc"><button>C</button></td>
<td class="numbs"><button>←</button></td>
<td class="col4"><button>÷</button></td>
</tr>
<tr>
<td class="numbs"><button>7</button></td>
<td class="numbs"><button>8</button></td>
<td class="numbs"><button>9</button></td>
<td class="col4"><button>×</button></td>
</tr>
<tr>
<td class="numbs"><button>4</button></td>
<td class="numbs"><button>5</button></td>
<td class="numbs"><button>6</button></td>
<td class="col4"><button>−</button></td>
</tr>
<tr>
<td class="numbs"><button>1</button></td>
<td class="numbs"><button>2</button></td>
<td class="numbs"><button>3</button></td>
<td class="col4"><button>&plus;</button></td>
</tr>
<tr>
<td colspan="3" class="but0"><button>0</button></td>
<td class="col4"><button>&equals;</button></td>
</tr>
</tbody>
</table>
</section>
</div>

Answer 1

Button default active state depends on border when setting border to none for the button this means that border-style set in :active won't work.
So in order to remove the border but reserve the clickable effect you need to add something like this in css
button:active{
border: 1px inset black
}
and consider specifying different buttons widths and heights to match the calculator style which will help in their background colors