html - 创建垂直可滚动表格
问题描述
基本上,我在如何编写代码时遇到了麻烦。我想要一个表格/网格。在左侧,我的用户输入了一些基本数据,我的用户必须在其余列中勾选一些复选框。唯一的问题是我正在从 api 读取这些数据,所以我不知道会有多少。我希望其余列的大小与我的第一个列相同,但可滚动。我该如何解决这个问题,因为我尝试了几种不同的方法,但似乎没有任何效果。我附上了我正在努力实现的一个小图像。
解决方案
使列表溢出:滚动。根据需要添加任意数量的菜单。这是一个很好的起点:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
max-height:100px;
overflow:scroll;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
</body>
</html>
推荐阅读
- reactjs - 在 React 应用程序中安装 Radium 时出现警告的解决方案
- sql-server - 数据重复时如何按组查找最小日期
- azure-data-lake - Azure HD Insight 是否支持自动加载程序进行新文件检测?
- arrays - 我有一个数组到字符串转换的问题
- swift - 使用主应用程序时如何刷新小部件?
- slack - Slack Block Kit 的 JSON 模式在哪里?
- c# - 无法从 flowlistview 中选择图像,以便导航到另一个视图以查看和/或更新此图像的一些详细信息
- java - 如何在更改片段时将图像文件保存在片段中?
- azure - cosmos db 是否缓存结果?
- python - ELI5:Django Migrations - 他们会更改 SQL 数据库吗?