HTML-表列未正确对齐

Question

我在网站上的某些内容中存在一些令人困惑的问题，因为我在多列中设置了一些内容，但是在此特定页面上，内容并不是平均分配的，因为一列似乎跨越了60-65没有任何理由的页面百分比（更令人沮丧的是，我有使用相同代码的相似页面）。

<table border="2" frame="void" rules="none" width="100%">
    <tbody>
        <tr width="100%">
            <td style="padding: 10px; vertical-align: top; width: 40%;">
            <h3><font color="#0076be">Support<sup>1</sup></font></h3>

            <p>The Victorian Camps, Sports and Excursions Fund (CSEF) provides payments to assist eligible families (holders of valid means-tested concession cards or temporary foster parents) to cover the costs of school trips, camps and sporting activities..</p>

            <div style="padding: 8px; background-color: rgb(199, 215, 240);"><font color="#0076be">For more information, first contact your child&rsquo;s school.&nbsp;If further information is required, see </font><strong><a href="https://www.education.vic.gov.au/about/programs/Pages/csef.aspx" target="_blank">https://www.education.vic.gov.au/about/programs/Pages/csef.aspx</a></strong>.</div>

            <h3><font color="#0076be">Public transport concessions</font></h3>

            <p>In Victoria, all students aged 18 and under can travel on public transport at a concession rate using a Child myki, with only those aged 17 and 18 required to carry government-issued proof of age ID or proof of concession entitlement. All students are eligible to apply for a PTV School Student ID, which is necessary for purchasing a Victorian Student Pass.</p>

            <div style="padding: 8px; background-color: rgb(199, 215, 240);"><font color="#0076be">For more information, see </font><strong><u><a href="https://www.ptv.vic.gov.au/ tickets/fares/concession/school-students" target="_blank">www.ptv.vic.gov.au/<br />
            tickets/fares/concession/school-students</a></u></strong><font color="#0076be">.</font></div>
            </td>
            <td style="padding: 10px; vertical-align: top; width: 50%;">
            <p><img alt="" src="/getmedia/9f940c79-6c85-4650-8bde-82f35de44204/7_b.aspx" /></p>

            <h3><font color="#0076be">Transport</font></h3>

            <p>In country areas and some outer metropolitan areas, students who reside 4.8 km or more from their nearest Catholic school may be eligible for transport assistance. In locations where there is not enough demand to run a free school bus service, the Victorian Government provides a conveyance allowance to help with travel costs.</p>

            <div style="padding: 8px; background-color: rgb(199, 215, 240);"><font color="#0076be">For more information, first contact your child&rsquo;s school.&nbsp;If further information is required, see </font><strong><a href="https://www.ptv.vic.gov.au/tickets/fares/concession/school-students" target="_blank">www.ptv.vic.gov.au/tickets/fares/concession/school-students</a></strong><br />
            <font color="#0076be">or:&nbsp;</font><strong><a href="https://www.ptv.vic.gov.au/getting-around/school-buses" target="_blank">www.ptv.vic.gov.au/getting-around/school-buses</a></strong>.</div>
            </td>
        </tr>
    </tbody>
</table>

任何有关可能导致这种情况的指针将不胜感激！

Answer 1

这是因为您在<td>设置的宽度。 一个是40％，另一个是50％。 您应该各付50％。 一行中所有tds的宽度应等于100％。 在您的情况下，第二个<td>自行调整其宽度以在表的边缘拉伸。