响应按钮表与百分比

Question

我正在制作一个基于网络的计算器，我用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>

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

这是在桌面或其他大屏幕上看起来像的图片（周围的白色很多已被切掉）：

我的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元素。它不知道有多宽，所以它会使自己尽可能小，然后td s将是表格宽度的25％。

将table的宽度更改为100％，您就会很好。

Answer 2

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

这看起来像这样：

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