why hr behave’s weirdly within a table?

I was creating my website and ran into a weird problem in table, that when i try to insert a hr under the it places the hr above the division somehow.

I want a hr under every row so as to make every row seperate with a hr.

<div style="width:100%;">
    <div style="width:48%; align-items:center;">
        <table style=" width:380px; height:100px; position: relative;margin: auto;">
            <th style="font-size:35px; text-align: left; font-weight:bold;">Nutrition Facts</th>
            <th style="font-size:20px; text-align: right;">Per Serving 100ml</th>
            <tr style="border-bottom: 3px;">
                <td>Energy</td>
                <td style="float:right;">19.7 kcal</td>
            </tr>
            <tr>
                <td>Carbohydrates</td>
                <td style="float:right;">5 g</td>
            </tr>
            <tr>
                <td>Sugar</td>
                <td style="float:right;">4.8 g</td>
            </tr>
            <tr>
                <td>Protien</td>
                <td style="float:right;">0 g</td>
            </tr>
            <tr>
                <td>Fat</td>
                <td style="float:right;">0 g</td>
            </tr>
        </table>
    </div>
    <div style="width:53%;">
        <img style="height:450px; padding-top:50px; float:left;" src="https://www.diabete.qc.ca/wp-content/uploads/2014/08/Les-fruits-768x768.png">
    </div>
</div>

Already tried placing hr in td, tr and table.

Thankyou

Answer

You can give the td a bottom border. If the td’s have no space between them, it will appear as a hr.

Note: instead of using float:right you should use text-align:right.

td {
  text-align:right;
  border-bottom:1px solid black;
}
table {
  border:0px;
  border-spacing: 0px;
}

🔥 UPDATE

As Alohci pointed out, tr can have a style if you set the border spacing!

tr {
  border-bottom:1px solid red;
}
table {
  border:0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *