Question

我以为这可能会出现在SO之前，但如果有，我找不到它！

由于jQueryUI应用的样式，我试图限制表标题（th）的高度。遗憾的是max-height似乎无效。

我的桌子延伸到可用的最大高度和宽度，并且标题在jQueryUI背景图像的上方和下方有一个看起来很糟糕的条带。

为什么会这样做，是否有一种解决方法不涉及重写大量代码？

更改背景图像的显示方式不是解决方案，因为最终用户能够控制jQueryUI主题，并且这些背景图像在每个主题上表现不同（基本上它可以打破其他主题）。

如果您想测试不同主题的任何更改，可以找到主题here的链接。

这是我的代码（在完整窗口中运行代码段以查看问题）：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解决方案也被考虑，只要它们不太笨重。

Answer 1

根据W3C specs：

在CSS 2.1中，＆＃39; min-height＆＃39;和＆＃39; max-height＆＃39;在桌子上，内联表，表格单元格，表格行和行组未定义。

在您的情况下，您可以为包含height标记的<tr>标记设置一个非常小的<th>。

<tr style="height:0;">，它会将行推到最小高度，以适应内部的内容。

更新了演示 - http://jsfiddle.net/cj9t1wdq/3/

Answer 2

我认为直接在<th>范围内无法将<th>的高度定义为 - “内容所需的最小高度”。

<强>建议：

0。） Don't使用tables。

1。）在<div>中嵌套<th>并在那里定义您的max-height媒体资源。将与<th>相关联的类转移到此内嵌式<div>，以便您可以访问。

是投诉吗？是! 表格单元格可能包含div，div可能包含div。

2。）将table换成<div>并将max-height提供给此div。

不要向这些div添加显示table-cell，因为它们的属性将被覆盖为默认表CSS2的属性（上面的第一条评论）

那又怎么样？

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

Answer 3

不幸的是，我认为max-height与<th>

不兼容

或者，您可以简单地设置<th>的高度并将溢出设置为隐藏，即;

th {
height: 100px;
overflow: hidden
}

甚至将<tr>包裹在<div>中，然后设置max-height。

最大高度在表标题上不能按预期工作

3 个答案: