텍스트 크기에 맞게 HTML 표 셀의 크기를 자동으로 조정하는 방법

Question

2 행과 가변 열이있는 테이블이 있습니다. 열에 대해 너비 = 100 %를 시도했습니다. 보기의 첫 번째 콘텐츠가 적합합니다. 그러나 콘텐츠를 동적으로 변경하는 경우 HTML 테이블 열 크기를 동적으로 늘리거나 줄이지는 않습니다. 미리 감사드립니다.

Answer 1

내용에 따라 셀의 크기를 조정하려면 표, 행 또는 셀의 너비를 지정하지 않아야합니다.

단어 줄 바꾸기가 필요하지 않은 경우 CSS 스타일 white-space: nowrap을 셀에 할당하십시오.

Answer 2

이 작업을 시도 할 수 있습니다 :

HTML

<table> 
    <tr> 
     <td class="shrink">element1</td> 
     <td class="shrink">data</td> 
     <td class="shrink">junk here</td> 
     <td class="expand">last column</td> 
    </tr> 
    <tr> 
     <td class="shrink">elem</td> 
     <td class="shrink">more data</td> 
     <td class="shrink">other stuff</td> 
     <td class="expand">again, last column</td> 
    </tr> 
    <tr> 
     <td class="shrink">more</td> 
     <td class="shrink">of </td> 
     <td class="shrink">these</td> 
     <td class="expand">rows</td> 
    </tr> 
</table> 

CSS 내가 가지고 싶은 경우, 최초의 TD는 텍스트에 맞게 말을 그냥도 밖으로 나머지 부분에 대한 어떤

table { 
    border: 1px solid green; 
    border-collapse: collapse; 
    width:100%; 
} 

table td { 
    border: 1px solid green; 
} 

table td.shrink { 
    white-space:nowrap 
} 
table td.expand { 
    width: 99% 
}