Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  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>

    the containing the element uses colspan="3", which makes it span three columns. This allows the input field to be wider and occupy the entire width of the row, aligning it better with the buttons. This can make the calculator display look more organized and visually appealing.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search