html中加滚动条,html中为t-body添加滚动条问题

问题描述

有这样一个表格，我想为表格内容(t-body)添加垂直滚动条，我的思路是给t-body一个固定高度，然后设置overflow,由于高度设置不起作用，所以给t-body加一个属性display:block;。然后下面是效果图：

tbody {

display: block;

height: 150px;

overflow: auto;

}

此时已经出现了滚动条了，但是tbody整个和thead中的一个th对齐了，怎么做到对齐方式像第一个截图那样子。

问题出现的环境背景及自己尝试过哪些方法

如果我给thead和tbody下的tr加上如下样式：

thead tr {

display: table;

width: 100%;

table-layout: fixed;

}

tbody tr {

display: table;

width: 100%;

table-layout: unset;

}

出现如下效果：

很显然，每一列平分了一行，但是我想要的效果是，列宽未最宽的那一列的长度，也就是第一个截图那样的样式？请问有设么方法能做到？谢谢！

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

Document

table {

border-collapse: collapse

}

th, td {

border: 1px solid salmon;

}

tbody {

display: block;

height: 150px;

overflow: auto;

}

thead tr {

display: table;

width: 100%;

table-layout: fixed;

}

tbody tr {

display: table;

width: 100%;

table-layout: fixed;

}

tbody tr {

color: gray;

}

thead tr {

color: darkslategrey;

}

日期方向价格委托量操作

2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情2019-07-06 11:14:59买入1.981 查看详情共 100条数据

你期待的结果是什么？实际看到的错误信息又是什么？