Max-height doesn't work as expected on table heading

Question

I thought this might have come up on SO before, but if it has, I can't find it!

I'm trying to limit the height of my table heading (th) because of the style applied by jQueryUI. Unfortunately max-height doesn't appear to work.

My table stretches to the maximum height and width available and the heading has an awful looking strip above and below the jQueryUI background image.

Why does it do this, and is there a workaround that doesn't involve re-writing huge chunks of code?

Making changes to the way the background image is displayed isn't a solution because the end user is able to control the jQueryUI theme, and these background images behave differently per theme (basically it can break other themes).

If you want to test any changes for a different theme, you can find the links to the themes here.

Here's my code (run the code snippet in full window to see the issue): http://jsfiddle.net/cj9t1wdq/

html, body {
    height:100%;
    margin:0;
    padding:0;
    font-size:90%;
}
table {
    border-collapse: collapse;
    font-size: 1.1em;
    height: 100%;
    position: relative;
    width: 100%;
}
th {
    max-height:100px;
}
th, td {
    padding:5px;
}

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table class="ContainerDiv" id="Panel_7">
    <tbody>
        <tr>
            <th class="ui-widget-header" colspan="9">
                <h2>Line Items </h2>
            </th>
        </tr>
        <tr>
            <th class="ui-widget-header">Line Item Index</th>
            <th class="ui-widget-header">Reference</th>
            <th class="ui-widget-header">Barcode</th>
            <th class="ui-widget-header">Size 1 Actual</th>
            <th class="ui-widget-header">Size 1 Planned</th>
            <th class="ui-widget-header">Size 2 Actual</th>
            <th class="ui-widget-header">Size 2 Planned</th>
            <th class="ui-widget-header">Size 3 Actual</th>
            <th class="ui-widget-header">Size 3 Planned</th>
        </tr>
        <tr>
            <td>1</td>
            <td>261264</td>
            <td>261264</td>
            <td>1</td>
            <td>1</td>
            <td>4</td>
            <td>4</td>
            <td>8</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>261265</td>
            <td>261265</td>
            <td>1</td>
            <td>1</td>
            <td>4</td>
            <td>4</td>
            <td>8</td>
            <td>8</td>
        </tr>
        <tr>
            <td>3</td>
            <td>261266</td>
            <td>261266</td>
            <td>2</td>
            <td>2</td>
            <td>8</td>
            <td>8</td>
            <td>16</td>
            <td>16</td>
        </tr>
        <tr>
            <td>4</td>
            <td>261267</td>
            <td>261267</td>
            <td>3</td>
            <td>3</td>
            <td>12</td>
            <td>12</td>
            <td>24</td>
            <td>24</td>
        </tr>
        <tr>
            <td>5</td>
            <td>261268</td>
            <td>261268</td>
            <td>2</td>
            <td>2</td>
            <td>8</td>
            <td>8</td>
            <td>16</td>
            <td>16</td>
        </tr>
    </tbody>
</table>

JavaScript solutions considered too, as long as they're not too clunky.

what about using `background-size: cover` on the th? that way the size of the background image would cover the whole element height — alliuca, Jun 25 '15 at 14:24
*In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.* - [W3C](http://www.w3.org/TR/CSS2/visudet.html#propdef-max-height) — Stickers, Jun 25 '15 at 14:32
oh ok sorry, missed that. then yeah you'd need to do what COOOL's suggested and change the markup a bit — alliuca, Jun 25 '15 at 14:36
@Pangloss I would expect the `TH` to have a maximum height and then then the `TD` to make up the rest of the height required to fill the space. — Jamie Barker, Jun 25 '15 at 14:53
@JamieBarker I added `` for the `th` rows, see if that works for you - http://jsfiddle.net/cj9t1wdq/3/ — Stickers, Jun 25 '15 at 15:08
@Pangloss That, is an idea that will work perfectly. Put it in answer so I can kiss it with a +1 and a shiny green tick please :) — Jamie Barker, Jun 25 '15 at 15:10

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

I believe it is not possible within a <th> directly as the height of <th> is defined as -- “the minimum height required by the content”.

Suggestions:

0.) Don't use tables.

1.) Nest a <div> within your <th> and define your max-height property there. Transfer your classes associated to <th> to this inner nested <div> so you can access.

Is it complaint? Yes! Table cells may contain divs, and divs may contain divs.

2.) Wrap the table in a <div> and give the max-height to this div.

Do not add display table-cell to these divs as their properties will be overridden to that of default table CSS2 (first comment above)

Also, what about?

    <th height="60"><!-- not using CSS but inline HTML? -->
    <th style="line-height:300px;"><!-- using line-height? -->
    <th style="display:block; min-height:200px; "><!-- toggling display block -->

edited May 23 '17 at 11:58

Community

1
1

answered Jun 25 '15 at 14:31

Dr Upvote

8,023
24
91
204

**0)** Not an option, I need a tabular layout with colspans. **1)** If I do that, the the text won't be vertically centred, plus it doesn't quite work (http://jsfiddle.net/cj9t1wdq/1/). **2)** the table can't have a fixed height. it's embedded within a responsive web page. Thank you though. – Jamie Barker Jun 25 '15 at 14:44
Also, your [second link](http://phrogz.net/CSS/WhyTablesAreBadForLayout.html) is because back in the day, everyone used tables to lay out their whole website, because once-upon-a-time it was the only available option. You'll notice that the web page has a copyright of 2004. Context is always valuable, and besides, I'm displaying tabular data (second section) ;) – Jamie Barker Jun 25 '15 at 14:51
@JamieBarker if it's responsive you may have to trigger a few tables, because tables really aren't that flexible :/ – Dr Upvote Jun 25 '15 at 14:58
It is responsive, however unfortunately it's tabular data :/ – Jamie Barker Jun 25 '15 at 15:05
You gotta redo it in divs, dude :( – Dr Upvote Jun 25 '15 at 15:10
Redoing it in non-table elements would just require `display:table`, `display:table-cell` etc. Not only that, you can't force `colspan` with CSS so again it's not an option. Have a +1 for effort though, none of your suggestions were stupid. – Jamie Barker Jun 25 '15 at 15:15

score 2 · Accepted Answer · answered Jun 25 '15 at 15:17

According to the W3C specs:

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

In your case, you could set a very small height to the <tr> tag that contains the <th> tags.

<tr style="height:0;">, it will push the row to its minimal height to fit the content inside.

Updated demo - http://jsfiddle.net/cj9t1wdq/3/

score 0 · Answer 3 · answered Jun 25 '15 at 14:49

0

Unfortunately, I believe max-height's are not compatible with <th>

Alternatively, you could simply set the height of the <th> and set overflow to hidden, ie;

th {
height: 100px;
overflow: hidden
}

Or even wrap the <tr> in a <div>, then set max-height.

answered Jun 25 '15 at 14:49

catalyst

35
8

1

I want them to shrink when the table is resized smaller, but just not get too large. Doing that just fixes it: http://jsfiddle.net/cj9t1wdq/2/. Also to wrap a `th` with a `div` is invalid html. – Jamie Barker Jun 25 '15 at 15:00

Max-height doesn't work as expected on table heading

3 Answers3