上部と下部のボーダー

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

あなたは次の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>