TD 셀을 기준으로 TABLE의 너비를 변경하십시오.

TD의 너비를 지정하여 테이블의 너비를 지정하는 방법을 찾고 있습니다. 다음 시나리오 (try it live on jsfiddle) 당신은 내가 100 픽셀 각 TD의 폭을 지정하고 나는 300 픽셀 테이블 (및 DIV의 수평 스크롤)을 얻을 것으로 예상 것을 볼 수 있습니다에서 그러나 실제로 브라우저에서 TD 셀을 기준으로 TABLE의 너비를 변경하십시오.

그들을 제공

wrong width

(즉,이 테이블의 폭을 3으로 나눈 것) 63px의 폭은 TDs를 테이블의 폭을 결정 만드는 방법과 원형이 아닌 다른 방법이 있나요? 지금까지 나는 테이블 레이아웃, 디스플레이, TD 및 TABLE에 대한 오버플로를 성공하지 않고 다른 값으로 시도했습니다.

HTML :

<div> 
    200px 
    <table> 
     <tr> 
      <td>100px</td> 
      <td>100px</td> 
      <td>100px</td> 
     </tr> 
    </table> 
</div>

과 최소한의 CSS :

div { 
    width: 200px; 
    height: 300px; 
    border: solid 1px red; 

    overflow-x: scroll; 
} 

td { 
    width:100px; 
    border: solid 1px #000; 
} 

table { 
    border-collapse: collapse; 
}

출처

2013-08-23 el_shayan

"TD의 너비를 지정하여 테이블의 너비를 지정하는 방법을 찾고 있습니다." 왜 그런지 물어봐도 될까요? 아마도 당신의 문제에 대한 또 다른 해결책이있을 것입니다. – user1477388

테이블이 동적으로 생성됩니다. 셀 크기 만 알려져 있습니다. 테이블은 컨테이너 경계를 넘어 확장되어야하며 스크롤 막대가 표시되어야합니다. –

간단한 솔루션은 TDs를위한 min-width 대신 width을 설정하는 것으로 나타납니다.

출처

2013-08-23 16:22:04

이것은 작동합니다. div와 같이 td 안에 너비가 100 % 인 항목이 없는지 확인하십시오. 그렇지 않으면 셀이 테이블의 전체 너비로 확장됩니다. – meub

@meub : 'min-width'와'max-width'를 모두 설정해도 문제가 해결되지 않습니까? – user1618143

간단한 솔루션은 TD의 내용이 100 픽셀 넓게 만들 수 있습니다.

<div> 
    200px 
    <table> 
     <tr> 
      <td><div class="content">100px</div></td> 
      <td><div class="content">100px</div></td> 
      <td><div class="content">100px</div></td> 
     </tr> 
    </table> 
</div> 

.content { 
    width: 100px; 
}

출처

2013-08-23 16:19:52 meub

나는 막 게시하려고했다. – user1618143

그럴 수도 있지만 순전히 CSS 기반의 다른 솔루션을 발견했습니다. 그래도 감사합니다. –

테이블을 동적으로 생성하는 경우 테이블의 너비에 동적으로 설정할 수 있습니다. 그냥 원하는 너비를 계산하고 <table> 태그에 style="width:300px;" (또는 무엇이든)을 추가하십시오.

사람들이 여기에 게시 한 다른 옵션도 물론 완벽하게 유효하지 않습니다.

출처

2013-08-23 16:38:27 user1618143

TD 셀을 기준으로 TABLE의 너비를 변경하십시오.

답변

관련 문제