유연한 테이블에서 텍스트 상자에 사용 가능한 공간을 채우는 방법은 무엇입니까?

Question

최소 너비와 최대 너비 사이에서 구부러지는 표를 만드는 방법은 무엇입니까? 2 열은 항상 같은 너비를 유지하고 세 번째 열의 텍스트 상자는 사용 가능한 공간을 채 웁니다.

거의 여기에서 작동합니다. 그러나 테이블이 작 으면 고정 열의 너비가 무시됩니다.

<table> 
    <thead> 
     <tr> 
      <td class="col1"> 
       Column 1 
      </td> 
      <td class="col2"> 
       Column 2 
      </td> 
      <td class="col3"> 
       Column 3 
      </td>   
     </tr> 
    </thead> 
    <tbody>  
     <tr> 
      <td class="col1"> 
       <input type="text" /> 
      </td> 
      <td class="col2"> 
       fixed content 
      </td> 
      <td class="col3"> 
       fixed content 
      </td> 
     </tr> 
    </tbody> 
</table> 


.col1 { 
    max-width: 25em; 
    min-width: 20em; 
} 

.col2, .col3 { 
    width: 10em; 
} 

input { 
    width: 100% 
} 

fiddle

Answer 1

나는 이것이 당신이 원하는 정확히 무엇인지 확실하지 않다,하지만 당신은 테이블 100% 폭을 확인해야합니다, 그래서 크기 조정과 함께 유연한 첫 번째 열에서 성장할 것입니다. 죄송합니다. max-width은 여기에 아무 것도하지 않는 것 같습니다.

JSFiddle