테이블에 최소 높이를 사용할 수 있습니까, tortd?

테이블에 최소 높이를 사용할 수 있습니까, tortd?

테이블에서 수신에 대한 몇 가지 세부 정보를 표시하려고 합니다.

저 테이블은 제품을 보여줄 수 있도록 최소 높이로 해주세요.따라서 제품이 하나만 있는 경우 테이블 끝에 최소한 공백이 있을 것입니다.반면에 5개 이상의 제품이 있다면 그 빈 공간이 없을 것입니다.

나는 이 CSS를 사용해 보았습니다.

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

하지만 효과가 없습니다.

height위해서td와 같이 작동합니다.min-height:

td {
  height: 100px;
}

대신에

td {
  min-height: 100px;
}

내용이 맞지 않으면 테이블 셀이 증가합니다.

https://jsfiddle.net/qz70zps4/

좋은 솔루션은 아니지만 다음과 같이 사용해 보십시오.

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

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

div {
    min-height: 300px;
}

사용하지 않는 솔루션div와 같은 유사한 요소가 사용됩니다.::after일루에td와 나란히min-heightHTML을 깨끗하게 저장합니다.

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

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

그래서 내용물을 디바로 포장해보고 디바를 주세요.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">
                    Good Morning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

td에 style="height:100px;"를 설정하면 td가 셀을 그 이상 성장시키는 내용을 가지고 있으면 td에서 최소 높이를 설정할 필요가 없습니다.

테이블 및 테이블 셀은 다음을 사용하지 않습니다.min-height속성, 설정height테이블이 확장되면 테이블이 확장되므로 최소 높이가 됩니다.

td가 사용하지 않는 경우에만 테이블 셀의 높이 설정이 올바르게 작동합니다.box-sizing: border-box테두리 상자를 사용하면 설정한 높이를 유지하고 콘텐츠가 넘칩니다. 사용content-box아니면 다른 것.저는 css-resetter를 사용했기 때문에 이 문제에 부딪혔습니다.

테이블 행의 셀 중 하나에 최소 높이의 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>

언급URL : https://stackoverflow.com/questions/19432092/can-i-use-a-min-height-for-table-tr-or-td