CODEWITHSUNDEEP
htmlcsshtml-tableborder
Shivkumar kondi
Shivkumar kondi

Reputation: 6762

How to add horizontal lines in Table

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?

Upvotes: 4

Views: 9756

Answers (6)

Priya
Priya

Reputation: 1

            <tr>
                <td><hr> </td> 
                <td><hr> </td>
            </tr>

I tried this, it worked

Upvotes: 0

Pukhraj soni
Pukhraj soni

Reputation: 2140

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

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

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>

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

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>

Upvotes: 2

Sergej
Sergej

Reputation: 2196

To insert an empty row, you can write:

<tr>
  <td colspan="2">&nbsp;</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">

Upvotes: 0

Malathy Venkatesan
Malathy Venkatesan

Reputation: 213

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>

Upvotes: 0

Related Questions