在表格單元格問題中添加邊框

Question

我對我的表格有一個奇怪的問題。我想補充border我rows，使用戶可以告訴 每個rows之間的區別..

我的HTML

<table> 
    <tr class='rows'> 
    <td class='test'> test1</td> 
    <td class='test'> test2</td> 
    <td class='test'> test3</td> 
    </tr> 
    <tr class='rows'> 
    <td class='test'> test8</td> 
    <td class='test'> test9</td> 
    <td class='test'> test7</td> 
    </tr> 
    <tr class='rows'> 
    <td class='test'> test4</td> 
    <td class='test'> test5</td> 
    <td class='test'> test6</td> 
    </tr> 

    more... 
</table> 

我的表CSS

table{ 
display: table; 
border-collapse: separate; 
border-spacing: 2px; 
border-color: gray; 
} 

.rows{ 
    border: solid 5px red; //this border properties doesn't work. 
    background-color:grey; //this would change the background colors 
} 

我無法弄清楚我的代碼出了什麼問題。任何人都可以幫助我嗎？非常感謝！

Answer 1

除非您更改display屬性，否則無法將邊框應用於表格行。推薦的解決方案是設置在表細胞邊界：

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

table td { 
    border-top: 1px solid gray; 
    border-bottom: 1px solid gray; 
} 

如果需要表單元格之間的空間，您可以使用padding。

Answer 2

只是刪除

display:table; 

在你的CSS ..

Look at this jsfiddle...