테두리 붕괴가 다시 작동하지 않습니다.

Question

죄송합니다. 전에도 비슷한 질문을했지만 그 중 어떤 제안도 내 경우에는 효과가 없었습니다. 레이아웃이 아닌 표 형식의 데이터 용 테이블이 있고 표 머리글에 테두리를 표시하지 않길 바랍니다. 내가 아는 한, 수행하는 방법은 CSS에 border-collaps: collapse;을 지정하는 것입니다. 그러나 내 경우에는 국경이 계속 표시되었습니다. 이 사이트를 검색하여 여기에 제안 된 다양한 솔루션을 시도했습니다. border-spacing-0px, display-none -하지만 아무런 효과가 없습니다. 국경이 아직있다. 내 CSS의 코드는 이제 다음과 같습니다

.tableStyle2 { 
    border-spacing: 0px; 
} 

.tableStyle2 th { 
    background-color: #1B7AE0; 
    border-color: #1B7AE0; 
    border-spacing: 0px; 
} 

.tableStyle2 tr { 
    display: none; 
} 

하고 해당 HTML 코드는 다음과 같다 :

<table class = "tableStyle2" width = "100%"> 
<tr> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
<th> ... </th> 
</tr> 
</table> 

(. 테이블의 나머지는 아직 기록되지 않은) 어떤 생각을 무엇 이 문제가 발생하고 테이블 헤더의 셀 사이에 테두리를 숨기는 것이 가능합니까?

Answer 1

<td> 각각은 고유 한 경계를 결정합니다.

.tableStyle2 { 
    border-spacing: 0px; 
    border-collapse:collapse; /* <--- add this so all the internal <td>s share adjacent borders */ 
    border:1px solid black; /* <--- so the outside of the <th> don't get missed */ 
} 

.tableStyle2 th { 
    background-color: #1B7AE0; 
    border-color: #1B7AE0; 
    border-spacing: 0px; /* <---- won't really need this if you have border-collapse = collapse */ 
    border-style:none; /* <--- add this for no borders in the <th>s */ 
} 

.tableStyle2 tr { 
    /* display: none; <--- you want to show the table */ 
}