How to add horizontal lines in Table

user_6107715 0
Viewed 7562

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?

html-table border css html
6 Answers

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;
}
user_25749650 
            <tr>
                <td><hr> </td> 
                <td><hr> </td>
            </tr>

I tried this, it worked

user_144151370
Related