htmlcsshtml-tablecalculator

The first column of my table seems to be pushing the other 2 columns to the right and i cant change it

I want all the columns to be together towards the left side of the table, but nothing i do is able to change the gap between the first column and the second(and third) columns. How do i fix this?

<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

I've tried changing the width of tr and nothing changes. I've tried changing the "tr td:first-child" width and nothing changes. I'm able to create a border and add background color but for some reason i can't change the size of the content box (of each first row for the first column)

i figured out that the input on top is what's affecting my table. I'm still not able to do what i want to do while keeping the input there though.

Solution

  • As @Paulie_D has suggested, using CSS-grids is a more wise and better choice to achieve things like a calculator layout.

    Look at this example:

    body {
  width: 50%;
}

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.my-grid input[type="text"] {
  grid-column: span 3;
}
    <body>
  <h1>Calculator</h1>

  <div class="my-grid">
    <input type="text">
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
  </div>
</body>