2013-08-21 3 views
1

테이블 내에서 너비가 고정 된 셀을 만들려고합니다.고정 너비 테이블 셀

 <table style="border: 1px solid black; width: 1128px; table-layout: fixed;"> 
      <tbody> 
       <tr> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td> 
       </tr> 
      </tbody> 
     </table> 

그러나, 테이블 세포 중 어느 것도 넓은 4 픽셀 없습니다 :

이 내가 지금 가지고있는 것입니다. 내가 뭘 놓치고 있니?

+0

그럼 당신이 1128px로 테이블의 너비를 지정했다. – j08691

+0

예 테이블 너비가 정확합니다. 원하는 것은 셀에 너비가 4px가되도록하는 것입니다. – vitorsdcs

+3

Vitor처럼 작동하지 않습니다. 표는 셀로 구성되어 있으므로 너비가 12 픽셀 밖에 안되는 1128 픽셀 너비의 표는 의미가 없습니다. 1128px 너비의 div에 표를 포장 할 수도 있습니다. 아니면 테이블 너비에'width' 대신'max-width'를 사용하고 싶습니다. –

답변

3

당신은 지정하지 폭, 제 4 <td> 태그를 추가 할 수 있습니다

<table style="border: 1px solid black; width: 1128px; table-layout: fixed;"> 
    <tbody> 
     <tr> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

이 결과 here를 참조하십시오. 처음 세 셀의 폭은 4px이고 빈 셀은 넷째 테이블의 나머지 너비를 채 웁니다.

+0

감사합니다. 효과가있었습니다! – vitorsdcs

0

글쎄, 당신은 ... 버퍼 세포를 추가 할 수 있습니다

예 : http://jsfiddle.net/YGRGG/

HTML

<table> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>Row 1 Col 1</td> 
      <td></td> 
      <td>Row 1 Col 2</td> 
      <td></td> 
      <td>Row 1 Col 3</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

CSS

table { 
    border: 1px solid black; 
    width: 1128px; 
} 
table td:nth-of-type(2), 
table td:nth-of-type(4), 
table td:nth-of-type(6) { 
    width:4px; 
}