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

i thought might have come on before, if has, can't find it!

i'm trying limit height of table heading (th) because of style applied jqueryui. unfortunately max-height doesn't appear work.

my table stretches maximum height , width available , heading has awful looking strip above , below jqueryui background image.

why this, , there workaround doesn't involve re-writing huge chunks of code?

making changes way background image displayed isn't solution because end user able control jqueryui theme, , these background images behave differently per theme (basically can break other themes).

if want test changes different theme, can find links themes here.

here's code (run code snippet in full window see 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, long they're not clunky.

according w3c specs:

in css 2.1, effect of 'min-height' , 'max-height' on tables, inline tables, table cells, table rows, , row groups undefined.

in case, set small height <tr> tag contains <th> tags.

<tr style="height:0;">, push row minimal height fit content inside.

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