내용에 관계없이 고정 된 크기의 테이블 셀을 만드는 방법

동적 콘텐츠가 포함 된 테이블을 사용하여 각 행의 높이가 다양합니다. 원하는 것은 콘텐츠와 관계없이 테이블의 높이를 고정하는 것입니다. 내용은 길이가 될 수 있으며 이미지도있을 수 있습니다. 내용에 관계없이 고정 된 크기의 테이블 셀을 만드는 방법

은 내가 CSS에 다음과 같은 시도 :

table { 
    border-collapse: collapse; 
} 
table td { 
    border: 1px solid #ccc; 
    padding: 4px; 
} 
table td:nth-child(2n+2) { 
    width: 200px; 
} 
table td:last-child { 
    width: 100px; 
} 
table tr { 
    height: 80px; 
    display: block; 
    overflow: auto; 
    background-color: red; 
    border: 2px solid #ccc; 
} 

<table> 
    <tr> 
    <td>content1</td> 
    <td>content 2</td> 
    <td>content 3</td> 
    </tr> 
    <tr> 
    <td>content1</td> 
    <td>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>content1</td> 
    <td></td> 
    <td>content 3</td> 
    </tr> 
</table>

그것은 잘 작동하지만, 세포의에서 어떤 내용이 없을 때 내용이 셀을 감소하는 경우, 또는, 그것은 축소합니다. inline-block를 지원하는 브라우저와

table td 
{ 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
    overflow: auto; 
}

: 여기에 fiddle

출처

2012-06-11 Bipin Chandra Tripathi

"붕괴"가 보이지 않습니다. http://jsfiddle.net/YD9Gg/4/ - 이것은 테이블 높이를 유지합니다. 셀에는 내용이 있습니다. 그러나 그것은 다른 브라우저에서 다릅니다. IE에서는 너비가 축소되지만 높이는 축소되지 않습니다. Firefox 및 Chrome의 경우 내용의 유무와 관계없이 폭과 높이가 동일합니다. –

http://jsfiddle.net/YD9Gg/5/ 이것이 당신이 원하는 것입니까? 기둥을 세로로 늘리려면? –

@ Sófka 고정 된 크기 (높이와 너비)의 모든 행과 스크롤 및 표시하지 않는 오버 플로우 콘텐츠가 필요합니다. –

당신은 (example) 같은 것을 사용할 수있다. (Altho는 이것이 좋은 해결책인지 잘 모르겠습니다.)

출처

2012-06-11 14:33:08 Qtax

내용에 관계없이 고정 된 크기의 테이블 셀을 만드는 방법

답변

관련 문제