我的表格的第一列似乎将其他两列推到了右边，我无法更改它

问题描述 投票：0回答：1

我希望所有列都集中在表格的左侧，但我所做的任何事情都无法改变第一列和第二列（和第三列）之间的间隙。我该如何解决这个问题？

<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>

how it looks on the browser

我尝试更改 tr 的宽度，但没有任何变化。 我尝试更改“tr td：first-child”宽度，但没有任何变化。 我可以创建边框并添加背景颜色，但由于某种原因，我无法更改内容框的大小（第一列的每个第一行）

我发现顶部的输入影响了我的桌子。但我仍然无法在保留输入的同时做我想做的事情。

html css html-table calculator
1个回答
0
投票

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 <h1>Calculator</h1>
        <table class="my-table">
            <tr>
                <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>
包含该元素的元素使用 colspan="3"，这使得它跨越三列。这使得输入字段更宽并占据行的整个宽度，从而更好地与按钮对齐。这可以使计算器显示看起来更有条理且更具视觉吸引力。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.