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

user_19171560 0
Viewed 45

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

<div class="mainNavigation">
  <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>

Here is the image of what the page looks like: Image of what the page looks like

css html
2 Answers

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 class="mainNavigation">
  <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

user_172354310

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

user_135217030
Related