Проблема с размерами
Ни как не могу понять в чем проблема, почему кнопки такие маленькие, вроде бы все указал в CSS
table{
width: 310px;
margin: 50px auto;
background: #663399;;
border: none;
border-radius: 10px;
padding: 0px 20px 20px;
}
.heading{
color:white;
font-size: 130%;
text-align: center;
}
#input, #answer{
width: 260px;
height: 50px;
font-size: 210%;
text-align: right;
border: none;
}
#input{
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 2px black;
color: #1e1e1e;
}
#answer{
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 2px black;
}
input [type=button]{
height: 60px;
width: 60px;
color: blue;
background: white;
margin: 1px;
border-radius: 8px;
border: none;
}
input[type=button]:hover{
background: #ccbbcc;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Calculator</title>
</head>
<body>
<table>
<tr>
<tr>
<td class="heading">
Simple Math Calculator
</td>
</tr>
<td>
<input type="text" id="input" placeholder="0" readonly="readonly">
<input type="text" id="answer" readonly="readonly" style="color:green;">
</td>
</tr>
<tr>
<td>
<input type = "button" value= "CE" oneclick = "clearScreen()" style="color:white; background: red;">
<input type = "button" value= "÷" oneclick = "getOperand()">
<input type = "button" value= "x" oneclick = "getOperand('*')">
<input type = "button" value= "←" oneclick = "backspace()" style="color:red;">
<br>
<input type = "button" value= "1" oneclick = "getnumber(1)">
<input type = "button" value= "2" oneclick = "getnumber(2)">
<input type = "button" value= "3" oneclick = "getnumber(3)">
<input type = "button" value= "+" oneclick = "getOperand('+')">
<br>
<input type = "button" value= "4" oneclick = "getnumber(4)">
<input type = "button" value= "5" oneclick = "getnumber(5)">
<input type = "button" value= "6" oneclick = "getnumber(6)">
<input type = "button" value= "-" oneclick = "getOperand('-')">
<br>
<input type = "button" value= "7" oneclick = "getnumber(7)">
<input type = "button" value= "8" oneclick = "getnumber(8)">
<input type = "button" value= "9" oneclick = "getnumber(9)">
<input type = "button" value= "()" oneclick = "brackets()">
<br>
<input type = "button" value= "+/-" oneclick = "getOperand('+/-')">
<input type = "button" value= "0" oneclick = "getnumber(0)">
<input type = "button" value= "**" oneclick = "getOperand('^')">
<input type = "button" value= "=" oneclick = "compter()"style="width: 120px; color:white; background:green;">
<br>
</td>
</tr>
</table>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>