[css] Firefox에 표시되지 않는 테두리, 테이블의 테두리 축소, 위치 : tbody의 상대 또는 셀의 배경색

Program / 글쓴이

다음 HTML을 고려하십시오.

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }

        div.datagrid table
        {
            border-collapse: collapse;
        }

        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

스 니펫 확장

마지막 셀에는 인라인 스타일에 왼쪽 및 오른쪽 테두리가 있습니다. 당신 (또는 적어도 나는)이 이것이 보일 것이라고 기대할 것입니다. IE에서는 이것이 사실입니다. 그러나 Firefox (6)에서는 그렇지 않습니다. 다음 방법으로 해결할 수 있습니다.

  • div.datagrid table tbodyCSS에서 상대 위치 제거
  • 변경 div.datagrid table tbody에 div.datagrid tableCSS의에
  • CSS 에서 background-coloron 제거table.data td.priceCell
  • CSS 에서 border-collapseon 제거div.datagrid table

이것은 우리 코드의 단순화 된 버전입니다. 우리는 또한 그것을 해결했습니다 (옵션 2 선택). 그러나 내가 궁금한 것은 다음과 같습니다.

  • Firefox의 버그입니까?
  • IE의 버그입니까?

특히 : CSS가있는 그대로 Firefox가 테두리를 표시하지 않는 이유는 무엇입니까?

답변

이것은 나에게 Firefox 버그처럼 보입니다. 배경은 경계선 위에 그림을 그리고 있습니다. 반투명 배경색을 사용하면 알 수 있습니다.

나는 신청했다 https://bugzilla.mozilla.org/show_bug.cgi?id=688556을

답변

방금이 문제가 발생하여 CSS 전용 솔루션에 도달했습니다 . 요소에 추가 background-clip: padding-box하기 만하면 td됩니다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/CSS/background-clip 문서를 참조하십시오.

답변

모든 것을 한곳에 모으십시오.

접힌 테두리가있는 테이블 내부에 상대 위치가있는 셀이있을 때 문제가 발생합니다 (보리스가 지적하고 버그 https://bugzilla.mozilla.org/show_bug.cgi?id=688556 를 채웠습니다 ).

이것은 user2342963에 표시된대로 CSS를 사용하여 쉽게 해결할 수 있습니다 (셀에 background-clip 추가 : padding-box).

문제 (Firefox 사용)와 수정 사항은 http://jsfiddle.net/ramiro_conductiva/XgeAS/ 에서 확인할 수 있습니다.

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>

답변

이것은 firefox의 버그이며 곧 수정되기를 바랍니다. 그러나 그 동안 나는 내 td세포를 로 설정하여이 문제를 해결할 수 있었다 position: static. 다른 사람에게 도움이되기를 바랍니다.

td {
    position: static;
}

답변

또 다른 가능한 해결책은 테이블 마크 업에서 colspan 오류를 수정하는 것입니다.

분명히 colspan 오류는 border-collapse를 사용할 때 숨겨진 테두리와 동일한 효과를 일으킬 수 있습니다.

http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html 을 통해 올바른 솔루션으로 안내되었습니다 .

내 테이블에는 8 개의 열만있을 때 <th colspan = “9”>를 썼습니다.

이로 인해 오류 (오른쪽 테두리 숨김)가 발생했습니다.

  • Chrome 51.0.2704.103m (64 비트)
  • Vivaldi 1.2.490.43 () (32 비트)

하지만 오른쪽 테두리로 렌더링

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • 가장자리 25.10586.0.0

답변

이 문제를 해결하는 가장 좋은 방법은 이와 같이하는 것입니다.

위치 : “thead”및 “tbody”요소의 상대 속성은 중요합니다. border-collapse 및 background-clip 속성도 마찬가지입니다. 모든 행과 교대 행에서 배경색으로 작동합니다.

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}

답변

이 (오래된) 문제에 대한 또 다른 해결책 추가 : 이것은 여러 tbody가있는 다소 복잡한 테이블이 있기 때문에 오늘 나에게 일어났습니다. 유일한 문제는 실제로 닫히지 않은 열린 tbody 태그가 있다는 것입니다. 내 CSS에서 아무것도 변경할 필요없이 태그를 삭제하고 테두리가 다시 나타납니다. 명확히하기 위해 내 구조는 다음과 같습니다.

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>

스 니펫 확장