表格，tr或td可以使用最小高度吗？

120

我正在尝试在表中显示接收的一些详细信息。

我希望那张桌子有一个最小的高度来展示产品。因此，如果只有一种产品，则该表的末尾将至少有一些空白。另一方面，如果有5个或更多产品，就不会有空白。

我尝试使用此CSS：

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

但这是行不通的。

提前致谢。

html css

— 基尔卡德
source

1

如果您为我们创建一个小提琴来尝试您的代码，将很有帮助。

— mavrosxristoforos

39

这不是一个很好的解决方案，但可以这样尝试：

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

并将div设置为最小高度：

div {
    min-height: 300px;
}

希望这就是你想要的...

— 阿诺德·扎克（Arnold Zak）
source

2

@SackySan您需要给divs类，然后使该规则仅适用于该类

— Zachary Weixelbaum

408

height对于td像这样的作品min-height：

td {
  height: 100px;
}

代替

td {
  min-height: 100px;
}

当内容不适合时，表格单元格将会增长。

https://jsfiddle.net/qz70zps4/

— 奥雷利亚诺·法罗（Aureliano Far Suau）
source

2

在我的谷歌浏览器（版本47.0.2526.106米）上运行Windows 7，我发现设置height的td实际处理的padding顶部和底部，因为你认为它是一个真正的可以引入一些布局问题height的空间。它不会在开发工具中显示为样式或计算样式，但是当您将鼠标悬停在检查的html元素上时，它将显示在屏幕上。

— Felypp Oliveira 2015年

但问题是最小高度不起作用！如果您有一个长文本并且需要另一行带有高度的行，将会发生混乱

— CMS

就像@CMS所说的那样，他min-height没有询问，height因为@frank在下面解释了它的行为table td。因此，也许这需要更好的解释。

— dft

3

绝对比接受的答案更好。

— Jinjubei

2

这个答案刚刚为我节省了潜在的工作时间，应该是答案。

— 卢克·普林

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）
source

13

在CSS 2.1中，“ min-height”和“ max-height”对表，内联表，表单元格，表行和行组的影响是不确定的。

因此，尝试将内容包装在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>

— 索宾·奥古斯丁
source

5

如果您设置style =“ height：100px;” 在td上，如果td的内容使单元格增长得更多，则无需在td上设置最小高度。

— 坦率
source

0

表格和表格单元格不使用该min-height属性，将其设置height为最小高度，因为如果内容拉伸了表格，表格将扩展。

— 阿古登多
source

-1

只需将min-height的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）
source