如何摺疊我的表格樣式中的空白？

Question

我有一張表，我必須通過代碼來構建，因爲它表示基於人名的查詢分組數據。所以人xyz有4行數據...我的問題是我如何爲每個組的顏色交替設置樣式？

這是我到目前爲止它的工作原理，但是在每個單元格的側面，頂部和底部都有空白，我希望組的顏色是固定的....沒有空白...我已經考慮到錶行和TD上交替的類名的人是colored..alternate

tr.alternate{background-color:#aaa;} 
td.alternate{background-color:#aaa} 

Answer 1

您可以在表中使用border-collapse: collapse。

border-collapse CSS屬性選擇表格的邊框模型。這個 對錶格單元的外觀和樣式有很大的影響。

分離的模型是傳統的HTML表格邊框模型。 相鄰的單元格各有不同的邊界。它們之間的距離爲 ，由border-spacing屬性給出。

在摺疊的邊框模型中，相鄰的表格單元共享邊框。在 那個模型中，插圖的邊框樣式的行爲像凹槽一樣，並且起始像脊一樣。

源：border-collapse developer mozilla

實施例而不border-collapse：

tr.alternate { 
 
    background-color: #aaa; 
 
}

<table> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
</table>

實施例與border-collapse：

table { 
 
    border-collapse: collapse; 
 
} 
 
tr.alternate { 
 
    background-color: #aaa; 
 
}

<table> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
</table>

正如你可以看到你不需要單獨的類td。