表格首列挤压其余列右移，如何保留顶部输入框并调整列间距？

我希望表格所有列靠左对齐，但首列把第二、第三列挤到右侧，没法调整它们之间的间距。试过修改tr宽度、tr td:first-child宽度都没用，虽然能设置边框和背景色，但改不了首列单元格的内容框尺寸。排查后发现是顶部的输入框导致的问题，但我想保留这个输入框并解决布局问题。

原代码如下：

<body>
        <h1>Calculator</h1>
        <table class="my-table">
            <tr>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><input type="button" value="1"></td>
                <td><input type="button" value="2"></td>
                <td><input type="button" value="3"></td>
            </tr>
            <tr>
                <td><input type="button" value="4"></td>
                <td><input type="button" value="5"></td>
                <td><input type="button" value="6"></td>
            </tr>
            <tr>
                <td><input type="button" value="7"></td>
                <td><input type="button" value="8"></td>
                <td><input type="button" value="9"></td>
            </tr>
        </table>

    </body>
</html>

问题核心是第一行的<td>仅占1列，浏览器会根据这个单元格里的输入框宽度设置表格首列宽度，后续行的列被迫继承这个过宽尺寸，导致按钮列被挤到右侧。

只需给第一行的<td>添加colspan="3"属性，让它横跨3列（和下方按钮行的列数一致），这样表格列宽会由按钮行的单元格决定，同时保留顶部输入框。

修改后的完整代码 #

<body>
        <h1>Calculator</h1>
        <table class="my-table">
            <tr>
                <!-- 添加colspan="3"让输入框单元格横跨3列 -->
                <td colspan="3"><input type="text"></td>
            </tr>
            <tr>
                <td><input type="button" value="1"></td>
                <td><input type="button" value="2"></td>
                <td><input type="button" value="3"></td>
            </tr>
            <tr>
                <td><input type="button" value="4"></td>
                <td><input type="button" value="5"></td>
                <td><input type="button" value="6"></td>
            </tr>
            <tr>
                <td><input type="button" value="7"></td>
                <td><input type="button" value="8"></td>
                <td><input type="button" value="9"></td>
            </tr>
        </table>

    </body>
</html>

可选优化（CSS） #

如果需要布局更规整，可添加以下CSS：

.my-table {
  border-collapse: collapse;
  text-align: left; /* 确保表格内容左对齐 */
}
.my-table input[type="text"] {
  width: 100%; /* 输入框填满整个跨列单元格 */
  box-sizing: border-box; /* 避免输入框超出单元格 */
  padding: 8px;
  margin-bottom: 8px;
}
.my-table input[type="button"] {
  width: 60px; /* 统一按钮宽度 */
  height: 40px; /* 统一按钮高度 */
  margin: 2px;
}

内容的提问来源于stack exchange，提问作者Charles