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;
}
