Responsive button table with percentages - html

Question

I'm making a web-based calculator, which I styled with CSS. Now I want to make this responsive so it is usable on smartphones. The following is a part of my HTML
<table class="buttonTable">
<tbody>
<tr>
<td>
<input class="button_standard" type="button" value="7"></input>
</td>
<td>
<input class="button_standard" type="button" value="8"></input>
</td>
<td>
<input class="button_standard" type="button" value="9"></input>
</td>
<td>
<input class="button_operator" type="button" value="÷"></input>
</td>
</tr>
<tr>
<td>
<input class="button_standard" type="button" value="4"></input>
</td>
<td>
<input class="button_standard" type="button" value="5"></input>
</td>
...
</tr>
...
</table>
What I'm trying to achieve for screen sizes of about 450px and below is that the buttons become reponsive, and start using percentages (it would be weird to use percentages for desktop screen sizes, as it would then create buttons with widths of about 500px).
This is a picture of what it looks like on desktops or other large screens (alot of the surrounding white has been cut away):
I have my CSS set up as follows (showing only relevant things):
table {
text-align: center;
margin: 10px auto;
}
td {
width: 70px;
height: 50px;
padding: 2px;
}
input[type="button"] {
width: 100%;
height: 100%;
...
}
#media (max-width: 450px) {
td {
width: 25%;
}
...
}
As I want the buttons to be 25% of the whole screen each, I set the width to 25%. You would expect the buttons to be 25% each, so covering the whole screen but with a margin of 2px. This is what happens instead:
What am I missing that causes this? I already tried styling the buttons themselves (the input[type="button"] elements) with the width of 25% but that was even worse.
What's interesting is that when the screen width hits the table width like shown above, the elements actually do change dynamically until they hit their minimum width defined by the text inside and such.
I really don't understand what's going on here.

Answer 1

The problem is with the table element. It doesn't know how wide to be, so it will make itself as small as possible, and then the tds will be 25% of the table's width.
Change the width of the table to be 100%, and you will be good.

Answer 2

I would change the table to be full width of the parent, as well as the input, and then put a max-width of say 25em-30em on the parent.
That would look something like this:
table, input {
width:100%;
}
main {
max-width: 27.5em;
margin: 0 auto;
padding: 0 1em; // for mobile
}