컬럼 너비 만드는 방법 = fill

Question

나는 HTML 테이블을 가지고 있는데, 모든 컬럼은 하나의 컬럼을 제외하고 고정 된 너비를 가지고 있습니다. 나머지 너비가 최소 너비 세트로 채워지는 곳에 "채우기"를 원합니다. width: auto을 사용하려고했지만 나머지 공간을 채우지는 못합니다.

Answer 1

이 테이블에서 코드를 작성하는 표준 방법이 아니다,하지만 당신은, 테이블의 너비를 지정 처음 두 TDS에게 일련의 폭을주고, 세 번째의 폭을 지정하지 않을 수 있습니다 JS Fiddle

<table width="100%"> 
    <tr> 
     <td bgcolor="blue" width="100">test</td> 
     <td bgcolor="red" width="100">test2</td> 
     <td bgcolor="yellow">test3</td> 
    </tr> 
</table> 

을

Answer 2

다음은 테이블이 최소 너비 요소 안에있을 수있는만큼 넓은 예제입니다.

http://codepen.io/anon/pen/DaLpf/

트릭 모든 열을 고정 폭, 또는 1 픽셀의 폭을주고 콘텐츠 폭에 맞게 white-space: nowrap;를 사용하는 것; 그런 다음 공간 채우기 열 너비를 자동으로 지정하십시오. 이 경우 표는 너비가 100 %입니다.

HTML 예

<div> 
<table> 
    <tbody> 
    <tr><td>Some Content</td><td>Fill Column</td></tr> 
    </tbody> 
</table> 
</div> 

CSS

div { 
    display: inline-block; 
    min-width: 500px; 
    background-color: lightgrey; 
    border: 10px solid grey; 
} 
table { 
    border-collapse: collapse; 
    width: 100%; 
} 
td { 
    border: 1px solid black; 
    padding: 0 25px; 
    line-height: 30px; 
    white-space: nowrap; 
    width: 1px; 
} 
td:last-of-type { 
    color:red; 
    width: auto; 
} 

는 도움을합니까? 까다 롭고 원하는 결과에 접근하는 데 수 많은 방법이 있습니다.