Question

我要事先道歉，因为我确定这个答案存在于某个地方，我似乎无法找到它。我想做的就是为一个元素设置一个具体的高度，并禁止它的孩子扩展它。

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .inner {
            width:100px;
            border:1pt black solid;
            height:100%;
        }
        .cantGrow {
            height: 100% !important;
        }
    </style>
</head>
<body>
    <table style="table-layout:fixed;">
        <tr class="rowCanGrow" style="height:100px; overflow:hidden;">
            <td class="inner">
                <div>Should see all of this text.</div>
            </td>
            <td class = "inner">
                <div class = "cantGrow" style="height:200px;">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
            </td>
        </tr>
    </table>
</body>
</html>

我知道那里有一些奇怪的CSS但是如果你从＆＃34; cantGrow＆＃34;中删除内联样式会发生同样的事情。细胞并应用高度：100％直接。为什么子元素扩展了父元素？

谢谢！

Answer 1

设置包含元素（单元格）并使用通配符标志将最大高度限制发送给其子项，以便它们继承最大高度。以下是我为您制作的示例：http://jsfiddle.net/27a73gem/1/

HTML：

<table>
<thead>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</thead>
<tbody>
    <td>content 1</td>
    <!-- let's make a big cell we need to contain in the row height -->
    <td><div class="really_big">content 2</div></td>
    <td>content 3</td>
    <td>content 4</td>
</tbody>

CSS：

table { 
    width: 100%;
    position: relative;
    display: inline-table;
    height: 100%;
}

thead {
    background-color: gray;
}

/* NOW USE WILDCARD FLAG TO SEND HEIGHT INHERITANCE TO CHILDREN */
td, td * { 
    max-height: 30px !important;
    border: 2px solid black;
}

.really_big {
    height: 1000px; /* <-- I'M HUGE COMPARED TO MY PARENT */
    background-color: red;
}

Answer 2

由于桌子的性质，细胞会随着它的兄弟一起生长。

但是td内部有一个div，并且添加了一个高度，所以为什么不添加溢出来保留该高度。

        .inner {
            width:100px;
            border:1pt black solid;
        }

    <table style="table-layout:fixed;">
        <tr class="rowCanGrow" style="height:100px;">
            <td class="inner">
                <div>Should see all of this text.</div>
            </td>
            <td class = "inner">
                <div class = "cantGrow" style="height:100px; overflow-y:scroll">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
            </td>
        </tr>
    </table>

如何强制表格单元格来控制其行高？

2 个答案: