极客观点
项目管理
HarmonyOS
问题描述
有这样一个表格，我想为表格内容(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;
}出现如下效果：
很显然，每一列平分了一行，但是我想要的效果是，列宽未最宽的那一列的长度，也就是第一个截图那样的样式？请问有设么方法能做到？谢谢！
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
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;
}
</style></head>
<body>
<table class="data">
<thead>
<tr>
<th>日期</th>
<th>方向</th>
<th>价格</th>
<th>委托量</th>
<th>操作</th>
</tr>
</thead>
<tbody class="current-body">
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
<tr class="current-list">
<td>2019-07-06 11:14:59</td>
<td>买入</td>
<td>1.98</td>
<td>1</td>
<td><a class="cancel-btn" oid="7134" href="#">查看详情</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">共 100条数据</td>
</tr>
</tfoot>
</table></body>
</html>
html5
你好~我是一个刚毕业的小白，看到你的问题我也自己copy了代码在自己本机上尝试，感到这样做的确很不美观，之后我在网上找到了一个demo，它是将表头和表格主体分离开放到两个div中，这样可以比较好的分别控制各自的样式。希望对你有帮助https://www.html5tricks.com/j...