HTML - 表格列未正确对齐答案

【问题标题】：HTML - Table columns not aligned properlyHTML - 表格列未正确对齐
【发布时间】：2018-10-16 23:44:14
【问题描述】：

我的网站上的某些内容存在一些令人困惑的问题，因为我在多个列中设置了一些内容，但在这个特定页面上，内容没有平均分配，因为一个列似乎跨越了大约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>

任何关于可能导致此问题的原因的指针将不胜感激！

【问题讨论】：

可能是某些文本太长（即第一个单元格中的 URL 等）并且单元格会自动扩展？这取决于容器的大小，对于更小更窄的容器，它更容易出现长字符串或宽图像。另外，该页面似乎是二十年前的代码……是用于电子邮件的吗？如果没有，也许将其转换为 CSS（或基于引导程序）类型的模板可能会使将来的维护更容易。处理不同的浏览器时，表格和填充也可能很痛苦。
您似乎将第一列的宽度指定为 40%，这是您想要的吗？

标签： html html-table multiple-columns

【解决方案1】：

这是因为您在<td> 中设置的宽度。一个是 40%，另一个是 50%。你应该在每个上放 50%。一行中所有 td 的宽度应等于 100%。在您的情况下，第二个 <td> 自行调整其宽度以在桌子边缘伸展。

【讨论】：