javascript - 表格没有在我的 div 内对齐并且比我设置的要宽

Question

我试图让网站右侧的抵押贷款计算器适合应该位于它周围的框 (div)。你可以看到它是重叠的。

网页:http://www.yourwhiteknight.com/properties/

从下面的代码中可以看出，表格的宽度是在表格属性 (width="") 和 CSS 代码中设置的，但它不遵守这些规则。我怎样才能强制这张 table 变小？

代码:

<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

表格只会变得和其中的内容一样小。您在计算器中输入的文本足够大，以至于限制了表格的大小。在这些输入上设置较小的宽度，应该一切都好!