How to make three buttons in one line span the entire page?-CodePudding

I want to make the three buttons span the entire page equally, does anybody know how?

<div >
            <table>
                <tr>
                    <td>
                        <form action="webPages/index.html">
                        <input type="submit" value="Purchase Used Cubes" />
                        </form>
                    </td>
                    <td>
                        <form action="webPages/index.html">
                        <input type="submit" value="Purchase Cube Products" />
                        </form>
                    </td>
                    <td>
                        <form action="webPages/index.html">
                        <input type="submit" value="Purchase Cube Repairs" />
                        </form>
                    </td>
                </tr>
            </table>
        </div>

Image of what the page looks like

CodePudding user response：

Set the width of table and input to 100%. A bit of explanation, setting the width of table to 100% makes it span across the page giving the input children of it equal width of (100/3)% (3 input elements) of the page width. Now setting the input width to 100% makes it span across the available space for it, which is (100/3)% of the page width.

table,
input {
  width: 100%;
}

<div >
  <table>
    <tr>
      <td>
        <form action="webPages/index.html">
          <input type="submit" value="Purchase Used Cubes" />
        </form>
      </td>
      <td>
        <form action="webPages/index.html">
          <input type="submit" value="Purchase Cube Products" />
        </form>
      </td>
      <td>
        <form action="webPages/index.html">
          <input type="submit" value="Purchase Cube Repairs" />
        </form>
      </td>
    </tr>
  </table>
</div>

Link to codepen: https://codepen.io/geekyquentin/pen/WNMEwQr

CodePudding user response：

Try using this snippet it will do the job:

table,
input {
  width: 100%;
}

But I suggest you use something like CSS grid, or flexbox for a better layout unless you have an engineering requirement.

If you want I can give you a good solution to it