테이블 행의 국경 문제는 일부 패딩이나 마진 (왼쪽 및 오른쪽)

Question

이 http://jsfiddle.net/anglimass/njAFp/

내가 테두리 왼쪽과 오른쪽 일부 공간 원하는 링크를 클릭합니다

를 원하십니까 :

남자들은 "원하는 이미지"왼쪽과 오른쪽을 시청하십시오. 나는 '테이블 행'패딩 (왼쪽과 오른쪽)을 쳤다. 아무도이 방법을 모릅니다.

감사합니다.

Answer 1

나는 TR 수준에서 할 수 있다고 생각하지 않는다. TD 레벨은 어떻습니까?

table tbody tr td { 
    border-top: 1px solid red; 
    border-bottom: 1px solid red; 
} 

table tr td:first-child { 
    padding-left: 20px; 
    border-left: 10px solid red; 
} 

table tr td:last-child, 
td.last-td { 
    padding-left: 20px; 
    border-right: 10px solid red; 
} 

이것은 x-browser와의 호환성에서도 중요합니다.

EDIT : 위의 내용을 피들에 넣고 ie7에서 보면서 마지막 TD에 'hacky' 'last-td'선택기를 추가 할 수 있습니다 (ie7은 'last-child'를 지원하지 않지만 ' 첫 아이 ')

Answer 2

그것은 일종의 해키,하지만 당신이 찾고있는 효과를 생성합니다

http://jsfiddle.net/njAFp/3/

<table cellspacing="0" cellpadding="0"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>lai</th> 
      <th>pola</th> 
      <th>vaala</th> 
      <th>elah</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="blank"></td> 
      <td>ennala</td> 
      <td>yamla</td> 
      <td>varamattala</td> 
      <td>vettiruven</td> 
      <td class="blank"></td> 
     </tr> 
    </tbody> 
</table> 

table{width:400px; height:auto; background:silver;border-collapse:collapse;} 
    table thead{} 
    table tbody{} 
    table tr{ background:silver;} 
    table tr th{ padding:5px; background:silver;} 
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;} 


td.blank { width:20px; border:0; } 

을