境界ボックス

Question

これでテーブルヘッダをスタイリングすることは、私のテーブル

ヘッダー行が下部に境界線を得たため、私がしたいスタイルです。そして、これは私のテーブル

table { 
 
    border: 1px solid #bbbbbb; 
 
} 
 

 
th { 
 
    border-bottom: 1px solid #bbbbbb; 
 
}

<table> 
 
    <tr> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.</td> 
 
    <td>Foo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2.</td> 
 
    <td>Bar</td> 
 
    </tr> 
 
</table>

あなたが見ることができるように、水平線が破線されています。どうすればフルラインを手に入れることができますか？私は

#header{ 
 
    border-bottom: 1px solid #bbbbbb; 
 
}

<table> 
 
    <tr id="header"> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    </tr> 
 
</table>

ようなヘッダテーブル行をスタイリング試みたが、何も起こりません。あなたのCSSは、それは次のようになりますので、

Answer 1

編集：

table { 
 
    border: 1px solid #bbbbbb; 
 
    border-spacing: 0 
 
} 
 

 
th { 
 
    border-bottom: 1px solid #bbbbbb; 
 
}

<table> 
 
    <tr> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.</td> 
 
    <td>Foo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2.</td> 
 
    <td>Bar</td> 
 
    </tr> 
 
</table>

追加部分がborder-spacingです。