테이블 열이 가능한 한 많은 공간을 차지하고 다른 열은 적게 차지하도록 만드는 CSS
-
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에서는 저에게 효과적이었습니다(다른 사용자는 시도하지 않았습니다)...시도해 볼 가치가 있습니다.
제휴하지 않습니다 StackOverflow