Я хотел разработать калькулятор с использованием Javascript.Я застрял в дизайне.Отображение текстового поля выходит за границы ячейки таблицы.Ниже приводится
/*The Style file is the following*/
table{
border:1px solid silver;
border-radius:5px;
}
.btn{
width:75px;
height:45px;
}
#equalToBtn{
background-color:blue;
color:white;
border-color:blue;
}
#resultText{
width:100%;
height:40px;
margin-right:2px;
}
<!--HTML code-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<table>
<tr>
<td colspan="4"><input type="text" id="resultText"></td>
</tr>
<tr>
<td><button class="btn" type="button">7</button></td>
<td><button class="btn" type="button">8</button></td>
<td><button class="btn" type="button">9</button></td>
<td><button class="btn" type="button">/</button></td>
</tr>
<tr>
<td><button class="btn" type="button">4</button></td>
<td><button class="btn" type="button">5</button></td>
<td><button class="btn" type="button">6</button></td>
<td><button class="btn" type="button">*</button></td>
</tr>
<tr>
<td><button class="btn" type="button">1</button></td>
<td><button class="btn" type="button">2</button></td>
<td><button class="btn" type="button">3</button></td>
<td><button class="btn" type="button">-</button></td>
</tr>
<tr>
<td><button class="btn" type="button">0</button></td>
<td><button class="btn" type="button">.</button></td>
<td><button class="btn" id="equalToBtn" type="button">=</button></td>
<td><button class="btn" type="button">+</button></td>
</tr>
</table>
</body>
</html>
Я поставил ширину текста 100%, и она переполняется.Любая помощь будет оценена.
Заранее спасибо !!!