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

May 22, 2022

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>

Image of what the page looks like

>Solution :

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>