테이블, tr 또는 td에 최소 높이를 사용할 수 있습니까?

120

수신에 대한 세부 정보를 표에 표시하려고합니다.

나는 그 테이블이 제품을 보여주기 위해 최소 높이를 갖기를 원합니다. 따라서 제품이 하나만있는 경우 테이블 끝에 적어도 약간의 공백이 있습니다. 반면에 제품이 5 개 이상이면 빈 공간이 아닙니다.

이 CSS로 시도했습니다.

table,td,tr{
  min-height:300px;
}

그러나 작동하지 않습니다.

미리 감사드립니다.

html css

— Kilkadg
소스

1

코드를 시도해 볼 수 있도록 바이올린을 만드는 것이 도움이 될 것입니다.

— mavrosxristoforos

39

좋은 해결책은 아니지만 다음과 같이 시도하십시오.

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

div를 최소 높이로 설정합니다.

div {
    min-height: 300px;
}

이것이 당신이 원하는 것이기를 바랍니다 ...

— 아놀드 자크
소스

2

당신이 만드는 다음 div의 클래스를 제공하고 필요 @SackySan이 규칙은 해당 클래스에 적용

— 재커리 Weixelbaum

전혀 좋지 않습니다!

— 아마드

408

height대한 td같은 작품 min-height:

td {
  height: 100px;
}

대신에

td {
  min-height: 100px;
}

내용이 맞지 않으면 표 셀이 커집니다.

https://jsfiddle.net/qz70zps4/

— 아우렐 리아 노 파 수 아우
소스

2

윈도우 7에서 실행중인 내 Google 크롬 (버전 47.0.2526.106 m)에서 필자는 설정 것을 발견 height의 td실제로하는 것은 A와 처리 padding당신이 정말로 생각으로 일부 레이아웃 문제를 초래할 수있다 상단과 하단, height공간. 개발 도구에서 스타일이나 계산 된 스타일로 표시되지 않지만 검사 된 html 요소 위에 마우스를 놓으면 화면에 표시됩니다.

— Felypp Oliveira 2015

그러나 문제는 작동하지 않는 최소 높이였습니다! 긴 텍스트가 있고 높이가있는 다른 줄이 필요하면 엉망이 될 것입니다.

— CMS

@CMS 말했듯이, 그는에 대한 질문 min-height하지 height@frank 그것은에 대해 동일한 동작합니다 아래에 설명하지만 table td. 그래서 아마도 이것은 좀 더 나은 설명이 필요합니다.

— dft

3

이것은 확실히 받아 들여진 것보다 더 나은 대답입니다.

— Jinjubei

2

이 답변은 잠재적으로 작업 시간을 절약 해주었습니다.

— Luke Pring

28

없는 솔루션 div은 ::after첫 번째 td행과 같은 의사 요소를 사용합니다 min-height. HTML을 깨끗하게 저장하십시오.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

— Alex Omelnitckii
소스

13

CSS 2.1에서는 테이블, 인라인 테이블, 테이블 셀, 테이블 행 및 행 그룹에 대한 '최소 높이'및 '최대 높이'의 효과가 정의되지 않았습니다.

따라서 콘텐츠를 div로 래핑하고 여기 에서 div에 min-height jsFiddle을 지정하십시오.

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

— 소빈 어거스틴
소스

5

style = "height : 100px;"를 설정하면 td에서 td에 그보다 더 많은 세포를 성장시키는 내용이 있으면 td에서 최소 높이가 필요하지 않습니다.

— 솔직한
소스

0

표와 표 셀은 min-height속성을 사용하지 않으며 height, 내용이 늘어 나면 표가 확장되므로 최소 높이를 설정 합니다.

— 아구 돈도
소스

-1

표 행의 셀 중 하나에 최소 높이의 css 항목을 사용하기 만하면됩니다. 이전 브라우저에서도 작동합니다.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

— Sacky San
소스