CODEWITHSUNDEEP
htmlcss
Steven Wojcio
Steven Wojcio

Reputation: 103

How can I force table cells to honor their row's height?

I'm going to apologize in advance because I'm sure this answer exists somewhere, I just can't seem to find it. All I want to do is set a concrete height for a element and disallow it's children from expanding it.

<!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>

I know there's a little bit of weird CSS in there but the same thing happens if you remove the inline style from the "cantGrow" cell and apply the height:100% directly. Why is the child element expanding the parent?

Thanks!

Upvotes: 2

Views: 10902

Answers (2)

DrewT
DrewT

Reputation: 5072

Set the containing element (cell) and use a wildcard flag to send your max-height restriction to its children so they inherit the max height. Here's an example I made for you: 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;
}

Upvotes: 3

Aaron
Aaron

Reputation: 10430

Because of the nature of a table the cells will all grow with it's sibling.

but you have a div inside the td with a height added, so why not add overflow to preserve that height.

        .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>

Upvotes: 1

Related Questions