How to add horizontal lines in Table - html

Question

I want two horizontal between both records and some extra bottom padding to add a symbol
Edit/update :
I am hard-coding what I want as below
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(7) {
background-color: red
}
td:nth-child(21) {
border-bottom: 1px solid blue;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
Still I need symbols to be added and I an better way to add border instead of this row <tr><td colspan="3"> -----------------------------</td></tr>
Can someone suggest me how to do that it properly?

Answer 1

Add border in tr and apply border-collapse:collapse for table.
table {
border: 1px solid black;
padding:0em 2em;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
td {
padding: 2em;
}
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>

Answer 2

Try the below code
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>

Answer 3

To insert an empty row, you can write:
<tr>
<td colspan="2"> </td>
</tr>
For extra padding, where you need - just add a class="extra-padding-bottom" attribute
And add appropriate CSS code:
.extra-bottom-padding {
padding-bottom: 100px;
}
For example <td class="extra-padding-bottom">

Answer 4

table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(even) > th,
tr:nth-child(even) > td {
padding-bottom: 0.75em;
border-bottom: 1px dashed #222;
}
tr:nth-child(odd) > th,
tr:nth-child(odd) > td {
padding-top: 0.75em;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>

Answer 5

The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
HTML -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table {
border-collapse: collapse;
}

Answer 6

<tr>
<td><hr> </td>
<td><hr> </td>
</tr>
I tried this, it worked