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

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 及以下的屏幕尺寸，我试图实现的是按钮变得有响应，并开始使用百分比(对桌面屏幕尺寸使用百分比会很奇怪，因为它会创建具有宽度的按钮大约 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 元素上。它不知道要有多宽，所以它会让自己尽可能小，然后 td 将是表格宽度的 25%。

将 table 的宽度更改为 100%，就可以了。