'How to stretch HTML inputs across the entire table cell

I'm making a calculator and I cant seem to figure out the way to make a html button stretch across the entire cell. Best I got was to get the button to stretch across the cell only horizontally. Why does width:100% work in my .buttons class but when I add height:100% it does nothing at all?

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}

.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}

.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

input {
  width: 100%;
  height: 100%
}

table {
  width: 501px;
  height: 700px;
}
<body>
  <div class="square">
    <div class="calculator">
      <form method="post">
        <table border="1" width=100%>
          <tr>
            <td colspan="4">
              <input type="text" id="inputbox" />
            </td>
          </tr>
          <tr>
            <td colspan="3"><input type="submit" name="reset" value="RESET" /></td>
            <td><input type="submit" name="divide" value="/" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="7" value="7" /></td>
            <td><input type="submit" name="8" value="8" /></td>
            <td><input type="submit" name="9" value="9" /></td>
            <td><input type="submit" name="multiply" value="*" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="4" value="4" /></td>
            <td><input type="submit" name="5" value="5" /></td>
            <td><input type="submit" name="6" value="6" /></td>
            <td><input type="submit" name="minus" value="-" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="1" class="buttons" value="1" /></td>
            <td><input type="submit" name="2" value="2" /></td>
            <td><input type="submit" name="3" value="3" /></td>
            <td><input type="submit" name="add" value="+" /></td>
          </tr>
          <tr>
            <td colspan="2"><input type="submit" name="0" value="0" /></td>
            <td><input type="submit" name="point" value="." /></td>
            <td><input type="submit" name="result" value="=" /></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</body>
htmlcss


Solution 1:[1]

Use width: 100%; and height: 100% for input (buttons). For safari and firefox add -webkit-appearance: none;

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}
.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}
.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

table {
  width: 501px;
  height: 700px;
}
.buttons {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
}
#inputbox{
background: #6b6b6b;
color:black;
}
input{
width:100%;
height:100%;
font-size: 22px;
outline: none;
border:0;
background: #3f3f3f;
cursor: pointer;
color: white;
-webkit-appearance: none; 
}
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="square">
  <div class="calculator">
    <table border="1" width=100%>
      <tr>
        <td colspan="4">
          <input type="text" id="inputbox" />
        </td>
      </tr>
      <tr>
        <td colspan="3"><input type="submit" name="display" value="RESET" /></td>
        <td><input type="submit" value="/" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="7" /></td>
        <td><input type="submit" value="8" /></td>
        <td><input type="submit" value="9" /></td>
        <td><input type="submit" value="*" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="4" /></td>
        <td><input type="submit" value="5" /></td>
        <td><input type="submit" value="6" /></td>
        <td><input type="submit" value="-" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="1" /></td>
        <td><input type="submit" value="2" /></td>
        <td><input type="submit" value="3" /></td>
        <td><input type="submit" value="+" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="0" /></td>
        <td><input type="submit" value="." /></td>
        <td><input type="submit" value="=" /></td>
      </tr>
    </table>
  </div>
</div>

snippet codepen

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions