技术求助：HTML表格首两行为何显示在同一行而非上下排列？

问题描述 #

我编写了如下HTML表格代码，但第一个table中的前两行<tr>显示在同一行，而非预期的上下纵向排列，排查后未找到原因，是否遗漏了相关配置？

原代码：

<html>
<div class="page">
    <div class="container">
        <header>
            <script src="./jScript.js" async></script>
            <link rel="stylesheet" type="text/css" href="./styleSheet.css">
            <h1> Energy saving calculator</h1>
        </header>
        <body>
                     
            <section class="savingCalc" id="paperTowelCalc" >
                <table>
                    <tbody>
                        <tr>
                            <td rowspan="3">Total Paper Towel Cost per annum</td>
                            <td rowspan="3"><input type="number" class="handDryerModelInput" id="papTowelCost" value="0"></td>
                        </tr>
                        <tr>
                            <td rowspan="3">Energy cost saving per annum by switching</td>
                            <td rowspan="3"><input type="number" class="handDryerModelInput" id="costSaveSwitch" value="0"></td>
                        </tr>
                    </tbody>
                </table>

                <table class="table">
                    <tr>
                        <td><label for="handDryPDayInp">Number of hand dries/day*</label></td>
                        <td><input type="number" class="handDryerModelInput" id="handDryPDayInp" value="0"></td>
                    </tr>
                    <tr>
                        <td><label for="daysOpenInp">Days per annum washroom is open</label></td>
                        <td><input type="number" class="handDryerModelInput" id="daysOpenInp" value="0"></td>
                    </tr>
                    <tr>
                        <td><label for="costPerTowel">Cost per towel</label></td>
                        <td><input type="number" class="handDryerModelInput" id="costPerTowel" value="0"></td>
                    </tr>
                    <tr>
                        <td><label for="dispenserReplaceNum">Number of dispensers to be replaced </label></td>
                        <td><input type="number" class="handDryerModelInput" id="dispenserReplaceNum" value="0"></td>
                    </tr>
                </table>
            </section>
        </body>
    </div>
</div>
</html>

原因分析 #

问题核心是错误使用了rowspan属性：

• 第一个<tr>中的两个<td>都设置了rowspan="3"，这会让这两个单元格强制占据3行的高度，但你的表格只有2个<tr>，浏览器无法分配足够的行空间，就会把第二个<tr>的内容挤压到第一行显示。
• 第二个<tr>里的<td>同样设置了rowspan="3"，这完全没有必要，因为这一行的单元格只需要属于当前行，不需要跨多行。

解决方案 #

移除所有不必要的rowspan="3"属性，让每个<tr>的<td>仅对应当前行，这样两行就会正常上下排列。

修正后的第一个table代码：

<table>
    <tbody>
        <tr>
            <td>Total Paper Towel Cost per annum</td>
            <td><input type="number" class="handDryerModelInput" id="papTowelCost" value="0"></td>
        </tr>
        <tr>
            <td>Energy cost saving per annum by switching</td>
            <td><input type="number" class="handDryerModelInput" id="costSaveSwitch" value="0"></td>
        </tr>
    </tbody>
</table>

内容的提问来源于stack exchange，提问作者Connor Stokes