Currently, I am working on developing a calculator using Javascript but I have encountered an issue with the design. The text box display is extending beyond the border of the table cell. Below is the
/*The Style file is as follows*/
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>
I have set the width of the text to 100% but it's causing overflow. I would greatly appreciate any assistance.
Thanks in advance!!!