Question

我使用下面的代码创建了一个'CSS Div Table'。我想使用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;
}

jQuery UI可调整大小：单独使用东手柄时固定高度

1 个答案: