顶部和底部边框

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>