0

我有一个 jqueryUI 对话框，其中有一个表，我正在用数据库查询的结果填充它。一切都运行良好，除了一个烦恼：我希望表格的每一行都恰好是一行高，永远不要绕到第二行，即我想将结果显示截断为表格宽度。

我认为我可以通过设置每个 tr 或 td 的 max-height 属性来使用 css 来做到这一点，但我无法做到这一点。所以我不知道该怎么做，甚至我是否应该在 css 或 jquery 中解决这个问题。

我尝试在我的 css 中设置“tr”元素的最大高度，并尝试设置“td”元素的最大高度，但这不起作用。我无法弄清楚最好的解决方案是什么。任何建议表示赞赏。

对话框如下所示：

<div id="MyDialog" class="cloudAppDialog" title="Your  Database Entries">
<form>
    <fieldset>
      <table id="TableRetrievedEntries" width="800" border="0" style="cursor:pointer">

      </table>
...
</form>
</div>

构建表的代码如下所示：

function CreateResultsTable() {
    var i       = 0;
    var lim     = parseInt(WCGetParsedXMLValue('recsReturned'));
    var theHtml;
    theHtml     = '<tr><th>Retrieved Entries</th></tr>';
    for (i=0; i < lim; i++) {
        var theRef   = decodeURIComponent(WCGetParsedXMLArrayValue("records", i));
        var tblRow   = '<tr><td id=' + i.toString() + '>' + theRef + '</td></tr>';
        theHtml     += tblRow;
    }
    if (lim > 0) {
        return(theHtml);
    } else {
        return('');
    }
}

CSS看起来像这样：

table#TableRetrievedEntries {
    border-collapse: collapse;   
}

#TableRetrievedEntries th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 12px;
    font-style: normal;
    color: #0242AC;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    text-decoration: underline;
    padding-left:3px;
    padding-right:3px;
    padding-top:0px;
    padding-bottom:10px;
}

#TableRetrievedEntries td {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-style: normal;
    color: #0242AC;
    padding: 3px 3px;
    max-height: 14px;
}

#TableRetrievedEntries tr:hover {
    background-color: #ccc;
}
4

2 回答 2

3

将此 CSS 添加到您的表格单元格中：

display:block;
overflow:hidden;
height: 50px; // Assuming that you want your max height to be 50px;
于 2012-09-19T02:35:51.633 回答
0

我花了很长时间才回答，但玛丽安就在这里是 jsfiddle http://jsfiddle.net/EvSv9/2/

于 2012-09-19T02:55:31.143 回答