테이블 열이 가능한 한 많은 공간을 차지하고 다른 열은 적게 차지하도록 만드는 CSS

StackOverflow https://stackoverflow.com/questions/118632

  •  02-07-2019
  •  | 
  •  

문제

CSS를 사용하여 HTML 데이터 테이블을 레이아웃해야 합니다.

테이블의 실제 내용은 다를 수 있지만 항상 하나의 기본 열과 2개 이상의 다른 열이 있습니다.내용에 관계없이 기본 열은 가능한 한 많은 너비를 차지하고 다른 열은 가능한 한 적은 너비를 차지하도록 만들고 싶습니다.내용이 변경될 수 있으므로 열의 정확한 너비를 지정할 수 없습니다.

의미상으로 유효한 간단한 HTML 테이블과 CSS만 사용하여 이 작업을 어떻게 수행할 수 있습니까?

예를 들어:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <-------->
도움이 되었습니까?

해결책

나는 CSS 전문가가 아니지만 이것은 나에게 효과적입니다(IE, FF, Safari 및 Chrome에서):

td.zero_width {
    width: 1%;
}

그런 다음 HTML에서:

<td class="zero_width">...</td>

다른 팁

Alexk의 솔루션과 유사하지만 상황에 따라 구현하기가 조금 더 쉬울 수도 있습니다.

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

신청할 수도 있습니다. white-space:nowrap 줄 바꿈을 피하려면 셀에.

나는 성공하지 못했습니다 width: 100%; 너비가 고정된 컨테이너 div가 없으면 의도한 결과를 얻을 수 없는 것 같습니다.대신 다음과 같은 것을 사용하는데 이것이 최선의 결과를 주는 것 같습니다.

.column-fill { min-width: 325px; }

이렇게 하면 필요한 경우 더 커질 수 있으며, 브라우저는 이렇게 설정된 열에 추가 공간을 모두 제공하는 것 같습니다.모든 사람에게 작동하는지 확실하지 않지만 Chrome에서는 저에게 효과적이었습니다(다른 사용자는 시도하지 않았습니다)...시도해 볼 가치가 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top