Gecko 기반 브라우저에서 CSS 테이블 셀 경계가 사라집니다

Question

나는 Gecko Bug를 드러내는 것처럼 보이는 매우 구체적인 HTML 테이블 구조를 가지고 있습니다.

다음은 문제의 증류 버전입니다. Gecko 기반 브라우저에서 다음 테이블을 관찰하십시오 (예 : FF) : (이를 새 파일에 복사하여 붙여 넣어야합니다)

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

바닥 오른쪽 셀의 "3"에 선이 누락되어 있습니다. 다른 브라우저에서 보면 예상대로 라인이 나타납니다. 흥미롭게도, 테이블의 thead 섹션을 버리고 우리가 얻는 것을보십시오.

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

그렇게하면 효과가 있습니다. 이것을 본 사람이 있습니까? 나는 테이블에 대한 접근성을 덜 만들지 만 지금은 해결 방법으로 내 thead 섹션을 제거 할 것이라고 생각합니다.

Answer 1

이상한 ... 확실히 그림 버그. 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴가 표시되도록 부분 라인이 어디에 있어야하는지, 맥락 메뉴를 무시하면 선이 그 아래에 다시 그려졌습니다.

편집 : 해결 방법 - 당신이 넣는 경우 style="border-color: ...;" 에 <td rowspan="3"> 당신은 국경을 나타낼 수 있지만 다른 색상 - 가능한 한 다른 사람과 가까운 것을 사용하십시오. 예를 들어, 테이블이 #FF0000 인 경우 #FF0001을 사용하십시오.

Answer 2

나는 또한이 버그를 발견했지만 내 PC에있는 것이 아니라 다른 PC에 있습니다. 특정 해상도 후 브라우저 창을 크기를 조정하면 선이 사라집니다. 창을 최대화하면 모든 팝 팝이 돌아옵니다. Border-Collapse : 별도; 이것은 각 셀의 각 지루함에 고유 한 폭을 제공합니다. 내가하고 싶은 일이 아니라 작동합니다.

또한 국경-콜랩스를 사용하여 발생할 수 있습니다 : 붕괴; 그런 다음 테두리를 1px로 정렬 한 다음 0px로 설정하십시오. 테두리가 무너지기 때문에 1px 너비에서 0px를 우선 순위로 삼는 것 같습니다.

어느 쪽이든 그것은 Firefox 일 뿐이며, 그것을 멀리하는 또 다른 이유입니다.