Why are my table rows appearing next to each other instead of on top?-CodePudding

So i have the below table, and i cant figure out why the first two table rows in the first table are appearing as if they were in the same row. Cant find a reason anywhere. I want them to appear as they you would expect, on top of one another in a column. Am i missing something here? https://jsfiddle.net/b4j2e1vq/

<html>
<div >
    <div >
        <header>
            <script src="./jScript.js" async></script>
            <link rel="stylesheet" type="text/css" href="./styleSheet.css">
            <h1> Energy saving calculator</h1>
        </header>
        <body>
                     

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


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


                </table>
            </section>

           
        </body>




    </div>
</div>

</html>```

CodePudding user response：

The correct answer here is to remove rowspan. Just mentioning for anyone who might face the same problem.

Since you need the rowspan though as you mentioned in the comments above, one possible solution is to add class names on your rows. Not very efficient but does the work:

.row {
   display: flex;
   align-items: center;
}

<html>
  <div >
    <div >
      <header>
        <script src="./jScript.js" async></script>
        <link rel="stylesheet" type="text/css" href="./styleSheet.css">
        <h1> Energy saving calculator</h1>
      </header>

      <body>


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


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


          </table>
        </section>


      </body>




    </div>
  </div>

</html>

CodePudding user response：

If you really want those rowspan, what you can do to get around is - You can add two empty rows between two tr

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

The issue here is that you are using rowspan=3, but there are just 2 rows there. The columns of the first row will try to take up the first two two columns for the next 3 rows. So as there will be no space left for the second row elements, this unexpected behaviour is happening.