如何添加橫線表

我想要兩個都記錄和一些額外的底部填充之間的水平來添加符號如何添加橫線表

編輯/更新：

我硬編碼什麼，我想，如下

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>

我仍然需要添加符號和我更好的方式來添加邊框，而不是此行<tr><td colspan="3"> -----------------------------</td></tr>

有人可以建議我該如何做到這一點呢？

來源

2017-08-03 Shivkumar kondi

爲什麼你只需要添加一個邊框TR和表？你只需要添加一個邊框和填充底部的th和td，這將做詭計 –

更新的答案。 –

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>

來源

2017-08-03 10:41:29

試試下面的代碼

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

來源

2017-08-03 10:42:17

要插入一個空行，你可以寫：

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

對於微胖，你需要 - 只需添加一個class="extra-padding-bottom"屬性並添加相應的CSS代碼：

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

例如<td class="extra-padding-bottom">

來源

2017-08-03 10:42:20 Sergej

添加邊框tr並申請border-collapse:collapse的表。

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>

來源

2017-08-03 10:43:28

如何添加橫線表

回答

相關問題