Переполнение входного текста внутри HTML-таблицы

Я хотел разработать калькулятор с использованием 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%, и он переполняется. Любая помощь будет оценена по достоинству.

Заранее спасибо!!!

html css

19.02.2019 06:51

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

добавлен

*{
box-sizing: border-box;
}

это выходило из-за заполнения, заданного для ввода. надеюсь это поможет.

/*The Style file is the following*/

*{
box-sizing: border-box;
}
 
 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>

Большое спасибо за ответ. Это то, что добавление 0px к входу делает то же самое, что и box-sizing:border-box

— 19.02.2019 10:16

no box-sizing:border-box будет регулировать ширину с отступом, он выйдет за пределы div, но уменьшит ввод. Благодарность

— 19.02.2019 10:17

19.02.2019 06:59