CSS 표 셀 테두리가 겹치는 표 테두리

Question

저는 CSS 전문가가 아니므로 조금 실망 스럽습니다. 나는 중계기로 가득 차있는 격자를 가지고있다. 행마다 시각적으로 구분하기 위해 각 행의 하단에 1px 테두리가 있어야합니다. 나는 또한 테이블의 양쪽에 진회색 테두리를 원한다. IE8에서

alt text http://img251.imageshack.us/img251/9278/borderff.png

그리고이 :

 #repeaterTable 
     { 
      border-left: 1px solid #A3A3A3; 
      border-right: 1px solid #A3A3A3; 
      border-collapse: collapse; 
     } 
     repeaterTable.td 
     { 
      border-bottom: 1px solid white; 

     } 

나는 FF에서이 결과를 얻고있다 (테이블의 오른쪽 가장자리의 SS) :

alt text http://img412.imageshack.us/img412/7092/borderie.png 다음이 테이블 CSS로

필요한 것은 어두운 회색 테두리를 각 행 테두리에 대해 끊어지지 않고 단색으로 유지하는 것입니다. 표에는 두 개의 열이 있지만 cellspacing은 0px이므로 tr에 border-bottom을 설정하면 연속 테두리가됩니다. 누구든지이 일을하기 위해 CSS에 약간의 변경을 제안 할 수 있습니까?

Answer 1

효과를 얻을이 시도 당신이 원하는 : IE8과 FF에서 다음과 같은 마크 업 테스트

이

#repeaterTable 
{ 
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3; 
    border-collapse:collapse; 
    border-spacing:0px; 
    background-color:#ccc; 
} 
#repeaterTable td:first-child 
{    
    border-left: 1px solid #A3A3A3; 
} 
#repeaterTable td:last-child 
{    
    border-right: 1px solid #A3A3A3; 
} 
#repeaterTable td 
{ 
    border-bottom: 1px solid white; 
} 

(크롬/사파리 :(에서 작동하지 않습니다)

<table id="repeaterTable"> 
<tr> <td>&nbsp;</td><td>&nbsp;</td> </tr> 
<tr> <td>&nbsp;</td><td>&nbsp;</td> </tr> 
<tr> <td>&nbsp;</td><td>&nbsp;</td> </tr> 
<tr> <td>&nbsp;</td><td>&nbsp;</td> </tr> 
</table> 

Answer 2

사용. 이 CSS는 IE/Safari/FF/Chrome에서 원하는 것처럼 보이게 할 수 있습니다. 문제는 테두리가 붕괴 된 것입니다. 흰색 경계를 테이블 테두리로 계속 가져 오는 것입니다. cellpadding = "0"및 cellspacing = "0"으로 다시 추가)이 CSS와 함께 가십시오 :

0 이 HTML로

#repeaterTable 
{ 
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3; 
    background: #CCC; 
} 
#repeaterTable td 
{ 
    border-bottom: 1px solid white; 
} 
#repeaterTable td.last 
{ 
    border-bottom: 0px; 
} 

는 :

<table id="repeaterTable" cellpadding="0" cellspacing="0"> 
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> 
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> 
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> 
<tr><td class="last">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> 
</table> 

그것은 작동합니다.

CSS에서는 last-child를 사용할 수 있지만 이전 브라우저 (IE7/etc)에서는 지원되지 않으므로 잘못 보입니다. 당신이 원하는 양립성에 달려 있습니다. 그래서 대신 "마지막"클래스를 사용했습니다.

대개 왼쪽 및 오른쪽 테두리가있는 DIV로 테이블을 감쌀 수 있습니다. 그런 다음 행 테두리에 대해 걱정할 필요가 있으며 축소를 사용할 수 있습니다.