테두리

Question

는 HTML 코드 다음 가졌 아래 이웃 일에 TD 행에 때 열 병합 설정을 확산 :

<table> 
<tr><th>First</th><th class='second'>Second</th><th class='third'>Third</th><th>Fourth</th></tr> 
<tr><td>Mike</td><td colspan=2 >John</td><td>Paul</td></tr> 
</table>​ 

그리고 다음 CSS :

table { 
    border-collapse: collapse; 
} 

td, th { 
border: 1px black solid; 
} 

td { 
    border-top: none; 
} 
th { 
    border-bottom: none; 
} 
th.second { 
    border-bottom: 3px green solid; 
} 
th.third { 
} 

나는 결과를 하나 개의 테이블로 기대

두 번째 셀 아래에 3px의 녹색 줄이 나타납니다. 크롬 대신에 두 번째 셀과 세 번째 셀 아래에 단색 테두리가 있습니다.

파이어 폭스에서 예상대로 결과가 나옵니다. 이 브라우저가 버그가 있습니까, 아니면 내 코드가 불법입니까?

당신은 http://jsfiddle.net/tt6aP/3/

PS에서 예를 볼 수 있습니다

th.third { 
    border-bottom: 2px solid red; 
} 

을 설정하려고 그리고 그것이에는 3px을 마련하려고합니다. 이것은 더욱 이상합니다.

스크린 샷

예상 :

크롬 :

파이어 폭스 : 그것은 버그인지 아닌지

Answer 1

글쎄, 난 몰라,하지만 이 문제를 만났을 때 문제가 발생했습니다. e 간단한 해결 방법으로 : 테두리 스타일을 적용 할 추가 행/열 을 삽입하십시오.

<table> 
    <tr> 
        <th>Ano</th> 
        <th class='first'>First</th> 
        <th class='second'>Second</th> 
        <th class='third'>Third</th> 
    </tr> 
    <tr class='hack'> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td>         
    </tr> 
    <tr> 
        <td>Mike</td> 
        <td colspan=2 >John</td> 
        <td>Paul</td> 
    </tr> 
</table> 

다음은 CSS의 : http://jsfiddle.net/huggz/LVjja/3/

따라하기 좀 더 쉽게, 내가 생각 :

table { 
    border-collapse: collapse; 
} 
tr.hack > td { 
    height:0px; 
} 
td, th { 
    border: 1px black solid; 
} 
tr.hack > td, td { 
    border-top: none; 
} 
tr.hack > td, th { 
    border-bottom: none; 
} 
th.first { 
    border-bottom: 3px green solid; 
} 
th.second { 
} 
th.third { 
} 

나는

Answer 2

크롬 over here에의 또 다른 예를이 테스트. 내 솔루션은 꽤 쉬웠다. 나는 border-collapse: collapse 세트가 필요하지 않았다. 표를 다음으로 변경했습니다 :

table { 
    border-collapse: separate; 
} 

모든 항목이 정상적으로 작동했습니다. 나는 그것이 비록 버그라고 생각해야한다. Chrome과 같은 느낌은 테두리가 접힐 때 잘못된 테두리 길이를 선택하는 것입니다. 현재 셀의 길이가 아니라 위에있는 행의 길이를 표시합니다.

또 다른 해결책처럼 경계 세포 전에 0 폭 열을 추가하는 것입니다 그래서 http://jsfiddle.net/huggz/LVjja/6/

CSS :

.hack { 
    width: 0; 
} 

HTML :

<tr> 
    <td colspan="4">3 Cols</td> 
</tr> 
<tr> 
    <td class="hack"></td> 
    <td class="top_border">1 details</td> 
    <td>2 normal</td> 
    <td>3 normal</td> 
</tr>