2013-07-14 24 views
0

나는 모서리가 둥근 테이블을 가지고 있으며, 각 셀의 모서리가 튀어 나오지 않도록 overflow: hidden CSS 명령을 썼다. Chrome에서는 정상적으로 작동하지만 Firefox에서는 정상적으로 작동하지 않습니다. 누군가가 무엇이 잘못되었는지 말해 줄 수 있습니까?오버플로 : 숨겨진 Firefox에서 숨김?

<style> 
table { 
     border-spacing: 0px; 
     border: 1px solid #222; 
     border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px; 
     overflow: hidden; 
} 
th { 
     height: 30px; 
     color: #fff; 
     background: #222; 
     text-align: left; 
} 
tr:nth-child(even) { 
    background: #245876; 
    color: #fff; 
    border: none; 
    height: 25px; 
} 
tr:nth-child(odd) { 
    height: 23px; 
} 
.pos { 
     width: 50px; 
} 
.name { 
     width: 175px; 
} 
</style> 

<table> 
    <thead> 
     <tr> 
      <th class="pos"></th> 
      <th class="name">Name</th> 
      <th class="amount">Amount</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="pos">1</td> 
      <td class="name">Bob</td> 
      <td class="amount">1324353</td> 
     </tr> 
     <tr> 
      <td class="pos">2</td> 
      <td class="name">John</td> 
      <td class="amount">10611</td> 
     </tr> 
     <tr> 
      <td class="pos">3</td> 
      <td class="name">Bill</td> 
      <td class="amount">3270</td> 
     </tr> 
     <tr> 
      <td class="pos">4</td> 
      <td class="name">Brian</td> 
      <td class="amount">1950</td> 
     </tr> 
     <tr> 
      <td class="pos">5</td> 
      <td class="name">Dan</td> 
      <td class="amount">1760</td> 
     </tr> 
    </tbody> 
</table> 

답변

0

추가 :는 " '국경 반경'속성 '테이블'과 '인라인 테이블'요소에 적용 않습니다

-moz-overflow: hidden; 
+1

이것은 파이어 폭스 22 (승 7)에 영향을 미치지 않는 것 같습니다. –

1

사양은 당신이 찾고있는 행동을 필요로하지 않습니다 'border-collapse'가 'collapse'일 때, UA는 border-radius 속성을 'table'과 'inline-table'요소에 적용 할 수 있지만 필수는 아니다. " (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)

Firefox에서는 작동하지 않을 수도 있습니다. 이 경우 테두리 머리글을 머리글 셀 (: 머리글 행의 first-child 및 : last-child)에 적용 할 수 있지만 항상 올바르게 정렬되지는 않습니다. 조금의 PITA, 나는 알고있다.

thead tr th:first-child { border-radius:8px 0 0 0; } 
thead tr th:last-child { border-radius:0 8px 0 0; } 
0

나는 Pete Scott의 대답을 좋아합니다. 그러나 디자인에 따라 반경이 좌우이고 오버 플로우가 숨겨진 포함 요소에 테이블 자체를 래핑하여 테이블에 반경 효과를 만들 수 있습니다. 그런 다음 테이블을 상대적으로 배치하고 - * px를 사용하여 필요한 시각적 효과를 만듭니다. 그러나 원하는 최종 결과를 보지 않고 예제를 제공 할 수 없습니다.

0

그것은 다음과 같은 트릭과 table 요소에 overflow의 효과를 변경하는 것이 가능 다음 tabledisplay, 예를 들어, inline-block (이 값은 테이블의 수축에 맞게 폭을 보존을 변경하고 휴식 안된다 레이아웃은 블록 요소로 둘러싸인 것으로 가정). 결과 렌더링은 테이블에 border-radiusoverflow의 div 래퍼가있는 것처럼 문제가되며 문제없이 Firefox에서 렌더링됩니다. 다음은 JSbin example입니다.

관련 문제