带有百分比的响应式按钮表

Question

我正在制作一个基于 Web 的计算器，并使用 CSS 设置样式。现在我想让它具有响应性，以便在智能手机上使用。以下是我的 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>

对于大约 450 像素及以下的屏幕尺寸，我想要实现的是按钮变得响应，并开始使用百分比（在桌面屏幕尺寸上使用百分比会很奇怪，因为它会创建具有宽度的按钮大约 500 像素）。

这是它在桌面或其他大屏幕上的样子（周围的很多白色已被切掉）：

我的 CSS 设置如下（仅显示相关内容）：

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%;
    }

    ...
}

由于我希望每个按钮占整个屏幕的 25%，因此我将宽度设置为 25%。您可能希望每个按钮占 25%，因此覆盖整个屏幕但边距为 2px。这就是发生的事情：

我错过了什么导致这种情况？我已经尝试将按钮本身（input[type="button"] 元素）设置为 25% 的宽度，但情况更糟。

有趣的是，当屏幕宽度达到如上所示的表格宽度时，元素实际上会动态变化，直到它们达到由内部文本等定义的最小宽度。

我真的不明白这里发生了什么。

Answer 1

问题在于table 元素。它不知道要多宽，所以它会让自己尽可能小，然后tds 将是表格宽度的 25%。

把table的宽度改成100%就好了。

Answer 2

我会将表格更改为父级以及输入的全宽，然后在父级上放置一个 25em-30em 的最大宽度。

看起来像这样：

table, input {
   width:100%;
}
main {
   max-width: 27.5em;
   margin: 0 auto;
   padding: 0 1em; // for mobile
}