0

データベースクエリの結果を入力しているテーブルを含むjqueryUIダイアログがあります。テーブルの各行の高さを正確に 1 行にし、2 行目に折り返さないようにしたい、つまり、結果の表示をテーブルの幅に合わせて切り詰めたい。

各 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 に答える