CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Jamie Barker
Jamie Barker

Reputation: 8246

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

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.

Upvotes: 1

Views: 2158

Answers (3)

Stickers
Stickers

Reputation: 78686

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/

Upvotes: 2

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

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

Upvotes: 2

catalyst
catalyst

Reputation: 35

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.

Upvotes: 0

Related Questions