Table 没有在我的 div 内对齐并且比我设置的更宽

Question

我正在尝试将网站右侧的抵押贷款计算器放入本应位于其周围的方框 (div) 中。你可以看到它是重叠的。

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

从下面的代码可以看出，table 的宽度是在 table 属性 (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

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

Answer 2

问题出在 table，那里有输入。您可以添加一个“width: 100%;”输入，问题就解决了。

您可以这样添加 css：

#mortgageCalculator input {
   width: 100%;
}

Table 没有在我的 div 内对齐并且比我设置的更宽

Table not aligning within my div and wider than I set it

javascript

css

html-table