设置没有显示的机身高度：块

Question

我试图在不使用display: block情况下固定tbody的height ，因为这里和这里都解释了 ，因为我通过拖放操作来处理列大小

 const columnResizable = { inserted: function(el) { var thElm; var startOffset; var thead = el.getElementsByTagName('thead')[0]; function handleHeadColumn(th) { th.style.position = 'relative'; var grip = document.createElement('div'); grip.innerHTML = " "; grip.style.top = 0; grip.style.right = 0; grip.style.bottom = 0; grip.style.width = '2px'; grip.style.marginLeft = '3px'; grip.style.marginRight = '3px'; grip.style.backgroundColor = '#e8e7e7'; grip.style.position = 'absolute'; grip.style.cursor = 'col-resize'; grip.addEventListener('mousedown', function setActiveColumn(e) { thElm = th; startOffset = th.offsetWidth - e.pageX; }); th.appendChild(grip); } Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), handleHeadColumn); thead.addEventListener('mousemove', function handleColumnMovement(e) { if (thElm) { var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")"); var width = startOffset + e.pageX + 'px'; tds[0].style.width = width; tds[0].width = width; tds[0].minWidth = width; thElm.width = width; thElm.style.width = width; thElm.minWidth = width; } }); thead.addEventListener('mouseup', function unsetActiveColumn() { thElm = undefined; }); }, unbind: function(el) { var thead = el.getElementsByTagName('thead')[0]; thead.removeEventListener('mousemove'); thead.removeEventListener('mouseup'); Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), function removeEventHandle(th) { var grip = th.getElementsByTagName('div')[0]; grip.removeEventListener('mousedown'); } ); } } var app = new Vue({ el: '#app', data: { photos: [] }, methods: { load() { const url = 'https://jsonplaceholder.typicode.com/photos'; fetch(url) .then(response => response.json()) .then((photos) => { this.photos = photos; }) } }, mounted() { this.load(); }, directives: { columnResizable } }) 

 table { margin-bottom: 0; table-layout: fixed; width: 100%; position: relative; } table>tbody { max-height: 400px; height: 400px; overflow-y: auto; display: block; } .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script> <div id="app"> <table v-column-resizable=""> <thead> <tr> <th>Id</th> <th>Title</th> <th>URL</th> </tr> </thead> <tbody> <tr v-for="photo in photos"> <td>{{photo.id}}</td> <td class="ellipsis">{{photo.title}}</td> <td class="ellipsis">{{photo.url}}</td> </tr> </tbody> </table> </div> 

如您所见..没有用....

如果我从tbody移除display:block ..工程...但是我需要修复tbody的高度大小。

如何在不调整中断列大小的情况下固定躯干高度

Answer 1

我发现我有一个解决方法..不是一个完美的解决方案，但可以。

我带回tr的行为

table thead, table tbody tr {
    ....
    display:table;
    table-layout:fixed;
}

table > tbody {
    ....
    display: block;
}

当用户拖放列时，我会再次修复所有行的列大小。

 const columnResizable = { inserted: function(el) { var thElm; var startOffset; var thead = el.getElementsByTagName('thead')[0]; function handleHeadColumn(th) { th.style.position = 'relative'; var grip = document.createElement('div'); grip.innerHTML = " "; grip.style.top = 0; grip.style.right = 0; grip.style.bottom = 0; grip.style.width = '2px'; grip.style.marginLeft = '3px'; grip.style.marginRight = '3px'; grip.style.backgroundColor = '#e8e7e7'; grip.style.position = 'absolute'; grip.style.cursor = 'col-resize'; grip.addEventListener('mousedown', function setActiveColumn(e) { thElm = th; startOffset = th.offsetWidth - e.pageX; }); th.appendChild(grip); } Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), handleHeadColumn); thead.addEventListener('mousemove', function handleColumnMovement(e) { if (thElm) { var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")"); var width = startOffset + e.pageX + 'px'; tds[0].style.width = width; tds[0].width = width; tds[0].minWidth = width; thElm.width = width; thElm.style.width = width; thElm.minWidth = width; } }); thead.addEventListener('mouseup', function unsetActiveColumn() { thElm = undefined; }); }, unbind: function(el) { var thead = el.getElementsByTagName('thead')[0]; thead.removeEventListener('mousemove'); thead.removeEventListener('mouseup'); Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), function removeEventHandle(th) { var grip = th.getElementsByTagName('div')[0]; grip.removeEventListener('mousedown'); } ); } } var app = new Vue({ el: '#app', data: { photos: [] }, methods: { load() { const url = 'https://jsonplaceholder.typicode.com/photos'; fetch(url) .then(response => response.json()) .then((photos) => { this.photos = photos; }) } }, mounted() { this.load(); }, directives: { columnResizable } }) 

 table { margin-bottom: 0; width: 100%; } table thead, table tbody tr { display:table; width:100%; table-layout:fixed; } table > tbody { max-height: 400px; height:400px; overflow-y:scroll; display: block; } .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script> <div id="app"> <table v-column-resizable=""> <thead> <tr> <th>Id</th> <th>Title</th> <th>URL</th> </tr> </thead> <tbody> <tr v-for="photo in photos"> <td>{{photo.id}}</td> <td class="ellipsis">{{photo.title}}</td> <td class="ellipsis">{{photo.url}}</td> </tr> </tbody> </table> </div> 

Answer 2

我试过编辑您上面提到的小提琴链接（ https://jsfiddle.net/hashem/CrSpu/554/ ），它在那里工作。

我只对CSS进行过更改。

table.scroll tbody {
        height: 150px;
        overflow-y: auto;
        overflow-x: hidden;
    }