Wie horizontale Linien in der Tabelle hinzufügen

Question

ich zwei Polster zwischen den beiden Platten und einigen zusätzlichen unteren horizontalen wollen

ein Symbol hinzuzufügen

Bearbeiten/Update:

Ich bin hart codierte, was ich wie unten wollen

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>

Noch brauche ich Symbole hinzugefügt werden und ich einen besseren Weg, um Rand statt dieser Zeile hinzufügen <tr><td colspan="3"> -----------------------------</td></tr>

Kann mir jemand vorschlagen, wie man das richtig macht?

Answer 1

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 2

Versuchen Sie den Code unten

<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

eine leere Zeile einzufügen, können Sie schreiben:

<tr> 
    <td colspan="2">&nbsp;</td> 
</tr> 

Für zusätzliche Polsterung, wo Sie brauchen - fügen Sie einfach ein class="extra-padding-bottom" Attribut und entsprechenden CSS-Code hinzufügen:

.extra-bottom-padding { 
    padding-bottom: 100px; 
} 

Zum Beispiel <td class="extra-padding-bottom">

Answer 4

border in tr und gelten border-collapse:collapse für Tisch.

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>