테두리 상자

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이다.