CSS를 사용하여 너비 내용을 자동 크기 조정

두 개의 열이있는 테이블이 있습니다. 두 번째 열은 내용이 완벽하게 표시되어야하며 너비는 내용을 기반으로 자동 계산되어야합니다. 첫 번째 열은 특정 지점 (최대 너비)까지 가능한 한 넓어야합니다. 불행히도 WPF는 HTML에만 익숙하지 않습니다. WPF에서 나는 다음과 같은 작성합니다CSS를 사용하여 너비 내용을 자동 크기 조정

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*" MaxWidth="600" /> 
    <ColumnDefinition Width="Auto" /> 
</Grid.ColumnDefinitions>

내 HTML은 다음과 같습니다

<colgroup> 
    <col class="fullWidthCol" /> 
    <col class="autoWidthCol" /> 
</colgroup>

내 CSS는 : 나는 근처에도 아니에요 확신

.fullWidthCol { 
    width: 100%; 
    max-width: 600px; 
} 

.autoWidthCol { 
    overflow: auto; 
}

. 내 최대 너비를 무시하고 가능한 한 큰 첫 번째 열의 크기를 조정하여 두 번째 열을 화면 오른쪽으로 밀어 넣습니다.

출처

2012-10-23 Paul

td은 max-width 사양을 허용하지 않습니다. 대신 width을 사용하십시오. td에서 width은 같은 효과를 나타냅니다.

예 :

table 
{ width: 100%; } 

.fullWidthCol 
{ width: 300px; } 

<table border="1"> 
    <tr> 
    <td class="fullWidthCol">The first column should be as wide as possible up to a certain point (max width). </td> 
    <td class="autoWidthCol">The second column should ALWAYS show it's content perfectly and the width should be automatically calculated based on the content. </td> 
    </tr> 
</table>

또는 http://jsfiddle.net/HdSA2/를 참조하십시오.

출처

2012-10-23 16:10:46 KatieK

그래도 작동하지 않습니다. 첫 번째 열은 300px이고 다른 열은 영원히 커집니다. 내용이 변경되고 동적이기 때문에 '300px'를 지정할 수 없습니다. 그 안에 들어간 것은 무엇이든 들어 맞출만큼의 크기가 필요합니다. 다른 기둥은 영원히 성장할 수 없습니다. 그것은 특정 지점에서 멈출 필요가 있습니다. 아마도 이것은 불가능합니다. – Paul

나는 혼란 스럽다. 첫 번째 열을 X 픽셀 이하로 제한하고 싶습니까? JSfiddle이 그렇게합니다. 두 번째 열을 어떻게 제한 하시겠습니까? 테이블의 전체 너비를 제한해야합니까? – KatieK

JSFiddle은 그렇게하지 않습니다. JSFiddle의 두 번째 열은 영원히 커집니다. 테이블이 커짐에 따라 두 번째 열이 커지고 싶지만 최대 너비가 필요합니다. 첫 번째 열은 항상 300 픽셀입니다. 콘텐츠를 기반으로하는 데 필요한만큼 정확하게 원합니다. 어쩌면 이것은 단지 CSS에서 가능하지 않습니다. – Paul

CSS를 사용하여 너비 내용을 자동 크기 조정

답변

관련 문제