How to add horizontal lines to a table
I want two horizontals between both entries and some extra padding to add a character
Change / update:
I am hard coding what I want like 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>
However, I need the characters to be added and I have the best way to add a border instead of this line <tr><td colspan="3"> -----------------------------</td></tr>
Can someone please tell me how to do this correctly?
source to share
Add a border to tr
and apply border-collapse:collapse
to the 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>
source to share
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>
source to share
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>
source to share
To insert a blank line, you can write:
<tr>
<td colspan="2"> </td>
</tr>
For extra padding where you need it - just add an attribute class="extra-padding-bottom"
AND add the appropriate CSS code:
.extra-bottom-padding {
padding-bottom: 100px;
}
for example <td class="extra-padding-bottom">
source to share