Javascript 设置不带显示的车身高度：块

我正在尝试修复

tbody

的

高度

，而不使用

display:block

，原因是我通过dragdrop处理列大小

const column可调整大小={
插入：功能（el）{
var-thElm；
var-startOffset；
var thead=el.getElementsByTagName（'thead'）[0]；
功能栏（th）{
th.style.position='相对'；
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='绝对'；
grip.style.cursor='col resize'；
grip.addEventListener（'mousedown'，函数setActiveColumn（e）{
THLM=th；
startOffset=th.offsetWidth-e.pageX；
});
附肢儿童（握力）；
}
Array.prototype.forEach.call（thead.queryselectoral（“th:not（：last child）”），
扶手柱）；
thead.addEventListener（'mousemove'，函数handleColumnMovement（e）{
如果（THLM）{
var tds=el.queryselectoral（“tbody td:n子项（“+（thElm.cellIndex+1）+”）；
变量宽度=起始值设置+e.pageX+‘px’；
tds[0]。style.width=宽度；
tds[0]。宽度=宽度；
tds[0]。最小宽度=宽度；
宽度=宽度；
thElm.style.width=宽度；
最小宽度=宽度；
}
});
thead.addEventListener（'mouseup'，function unsetActiveColumn（）{
THLM=未定义；
});
},
解除绑定：函数（el）{
var thead=el.getElementsByTagName（'thead'）[0]；
thead.removeEventListener（'mousemove'）；
thead.removeEventListener（'mouseup'）；
Array.prototype.forEach.call（thead.queryselectoral（“th:not（：last child）”），
功能removeEventHandle（th）{
var grip=th.getElementsByTagName（'div'）[0]；
grip.removeEventListener（'mousedown'）；
}
);
}
}
var app=新的Vue({
el:“#应用程序”，
数据：{
照片：[]
},
方法：{
加载（）{
常量url=https://jsonplaceholder.typicode.com/photos';
获取（url）
.then（response=>response.json（））
。然后（（照片）=>{
this.photos=照片；
})
}
},
安装的（）{
这个.load（）；
},
指令：{
可调整大小的列
}
})

表格{
页边距底部：0；
表布局：固定；
宽度：100%；
位置：相对位置；
}
表>t车身{
最大高度：400px；
高度：400px；
溢出y：自动；
显示：块；
}
.省略号{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

身份证件
标题
统一资源定位地址
{{photo.id}
{{photo.title}
{{photo.url}

我尝试编辑小提琴链接（ )你在上面提到过，它在那里起作用

我只对CSS进行了更改

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

---

我找到了一个解决办法。。这不是一个完美的解决方案，但很有效

我带回了

tr

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

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

当用户拖放列时，我会再次固定所有行的列大小

const column可调整大小={
插入：功能（el）{
var-thElm；
var-startOffset；
var thead=el.getElementsByTagName（'thead'）[0]；
功能栏（th）{
th.style.position='相对'；
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='绝对'；
grip.style.cursor='col resize'；
grip.addEventListener（'mousedown'，函数setActiveColumn（e）{
THLM=th；
startOffset=th.offsetWidth-e.pageX；
});
附肢儿童（握力）；
}
Array.prototype.forEach.call（thead.queryselectoral（“th:not（：last child）”），
扶手柱）；
thead.addEventListener（'mousemove'，函数handleColumnMovement（e）{
如果（THLM）{
var tds=el.queryselectoral（“tbody td:n子项（“+（thElm.cellIndex+1）+”）；
变量宽度=起始值设置+e.pageX+‘px’；
tds[0]。style.width=宽度；
tds[0]。宽度=宽度；
tds[0]。最小宽度=宽度；
宽度=宽度；
thElm.style.width=宽度；
最小宽度=宽度；
}
});
thead.addEventListener（'mouseup'，function unsetActiveColumn（）{
THLM=未定义；
});
},
解除绑定：函数（el）{
var thead=el.getElementsByTagName（'thead'）[0]；
thead.removeEventListener（'mousemove'）；
thead.removeEventListener（'mouseup'）；
Array.prototype.forEach.call（thead.queryselectoral（“th:not（：last child）”），
功能removeEventHandle（th）{
var grip=th.getElementsByTagName（'div'）[0]；
grip.removeEventListener（'mousedown'）；
}
);
}
}
var app=新的Vue({
el:“#应用程序”，
数据：{
照片：[]
},
方法：{
加载（）{
常量url=https://jsonplaceholder.typicode.com/photos';
获取（url）
.then（response=>response.json（））
。然后（（照片）=>{
this.photos=照片；
})
}
},
安装的（）{
这个.load（）；
},
指令：{
可调整大小的列
}
})

表格{
页边距底部：0；
宽度：100%；
}
表THAD，表tbody tr{
显示：表格；
宽度：100%；
表布局：固定；
}
表>t车身{
最大高度：400px；
高度：400px；
溢出y：滚动；
显示：块；
}
.省略号{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

身份证件
标题
统一资源定位地址
{{photo.id}
{{photo.title}
{{photo.url}

您可以