頂部和底部邊框

Question

我在這裏有一些代碼，這給了我一個底部邊框，我該如何添加它才能使它顯示頂部和底部邊框？

table.bottomBorder { 
 
    border-collapse: collapse; 
 
} 
 

 
table.bottomBorder td, 
 
table.bottomBorder th { 
 
    border-bottom: 1px solid lightgrey; 
 
    padding: 10px; 
 
    text-align: center; 
 
}

<table class="bottomBorder"> 
 
    <tr> 
 
    <th>Table Header</th> 
 
    <th>Table Header</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Table cell</td> 
 
    <td>Table cell</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table cell</td> 
 
    <td>Table cell</td> 
 
    </tr> 
 
</table>

Answer 1

table.bottomBorder th { 
    border-bottom: 1px solid lightgrey; 
    border-top: 1px solid lightgrey; 
    padding: 10px; 
    text-align: center; 
} 

閱讀更多關於邊界的位置：http://www.cssbasics.com/chapter_13_css_borders.html

Answer 2

border-bottom: 1px solid lightgrey; 
border-top: 1px solid lightgrey; 

這將分配一個頂部邊框和底部邊框和並存，它們不會相互覆蓋其他或任何東西。

Answer 3

你錯過了th border屬性，添加下面的CSS部分

table.bottomBorder tr th { 
    text-align: center; /* If you need */ 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd; 
    padding: 10px; 
} 

table.bottomBorder { 
 
    border-collapse: collapse; 
 
} 
 

 
table.bottomBorder td, 
 
table.bottomBorder th { 
 
    border-bottom: 1px solid lightgrey; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
table.bottomBorder tr th { 
 
    border-bottom: 1px solid #ddd; 
 
    border-top: 1px solid #ddd; 
 
    padding: 10px; 
 
    text-align: center; 
 
}

<table class="bottomBorder"> 
 
    <tr> 
 
    <th>Table Header</th> 
 
    <th>Table Header</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Table cell</td> 
 
    <td>Table cell</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table cell</td> 
 
    <td>Table cell</td> 
 
    </tr> 
 
</table>