Стол не выравнивается внутри моего div и шире, чем я его устанавливал

Question

Я пытаюсь получить калькулятор ипотеки на правой стороне веб-сайта, чтобы поместиться в поле (div), которое должно быть вокруг него. Вы можете видеть, что он перекрывается.

WEB-страница: http://www.yourwhiteknight.com/properties/

Как вы можете видеть из приведенного ниже кода, ширина таблицы задается в атрибуте таблицы (ширина = «») и в CSS код, но он не подчиняется этим правилам. Как я могу заставить эту таблицу меньше?

Код:

<div class="textwidget"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> 

<!-- Javascript function is here but no reference to width --> 


<form id="mortgageCalculator"> 

<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248"> 
    <tbody><tr style="background-color: #496b1f; font-size:11px;"> 
     <td colspan="2" align="CENTER"> 
     <b><font color="white">Mortgage Calculator</font></b> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 

      <table border="0" cellpadding="1"> 
       <tbody><tr> 
        <td colspan="2"><b>Mortgage Data:</b> 
        </td> 
       </tr><tr> 
        <td align="RIGHT">House Price ($): 
        </td> 
        <td> 


    <input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV 

Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="RIGHT">Down Pymt ($):</td> 
        <td> 
         <input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)"> 
        </td> 
       </tr> 
       <tr> 
        <td align="right">Principal ($):</td> 
        <td> 
         <input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="RIGHT">Annual Int. Rate (%):</td> 
        <td> 
         <input type="TEXT" name="interest" value="8.5" size="5"> 
        </td> 
       </tr> 
       <tr> 
        <td align="RIGHT">Term (Months):</td> 
        <td> 
         <input type="TEXT" name="term" value="120" size="5"> 
        </td> 
       </tr> 
       <tr> 
        <td align="RIGHT">Monthly Pymt:</td> 
        <td> 
         <input type="TEXT" name="monthlyPayment" size="5"> 
        </td> 
       </tr><tr> 
       <td align="RIGHT">Balloon Pymt:</td> 
        <td> 
         <input type="TEXT" name="balloon" size="5"> 
        </td> 
       </tr> 
      </tbody></table> 
     </td> 
    </tr> 
    <tr> 
     <td align="CENTER" colspan="2"> 
      <input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)"> 
     </td> 
    </tr> 
</tbody></table> 

</form></div> 

Answer 1

таблица будет только как малые, как содержание в нем. Ваши текстовые входы в калькуляторе достаточно велики, чтобы они ограничивали размер таблицы. Установите меньшую ширину на этих входах, и все должно быть хорошо!

Answer 2

проблема находится внутри таблицы, с входами там. Вы можете добавить «width: 100%;» на входы и проблема решена.

Вы можете добавить CSS, как это:

#mortgageCalculator input { 
    width: 100%; 
}