jQuery UI 可调整大小 : fixed height when using east handle alone

Question

我使用下面的代码创建了一个“CSS Div 表”。我想使用 JQuery UI Resizable 插件来调整列的大小。

这很好用，但是一旦列中的文本不再适合，它就会换行，使我的行更高。我想隐藏单元格中放不下的文本。

是否可以将 DIV 用作表格单元格？或者是否有某种解决方法/更好的方法？

参见 jsFiddle here .

HTML

<div class="table">
    <div class="row">
        <div class="cell resize">If i make this colums smaller i this row to remain it's hight</div>
        <div class="cell">I tried playing arround with</div>
    </div>
    <div class="row">
        <div class="cell resize">and just break the text (making it unvisible)</div>
        <div class="cell ">white-space (nowrap) and some overflow values</div>
    </div>
    <div class="row">
        <div class="cell resize"></div>
        <div class="cell">but the no wrap makes the drag stop on the longest line</div>
    </div>
</div>

CSS

.table {
 display: table;
 width: 100%;
}

.row {
 display: table-row;
}

.cell {
 padding: 3px;
 display: table-cell; 
 border-right: 1px solid #000;
 border-bottom: 1px solid #000;
 /*overflow: invisible;
 white-space: nowrap;*/
}

JQUERY

$(function () {
    $('.resize').resizable({
        handles: 'e'
    });
});

Answer 1

尝试以下操作

.cell {
 padding: 3px;
 display: table-cell; 
 border-right: 1px solid #000;
 border-bottom: 1px solid #000;
 overflow: hidden;
 white-space: nowrap;
}