我正在开发一个项目，其中包括一个带有可滚动单元格的表格。这看起来可能不是使用表格的最优雅的方式，但这正是我的用例的方法。不幸的是，我的单元格内容的顶部仍然隐藏，我无法滚动到它......
这是该项目的一个非常小的样本（一个大得多的表格的单个单元格）：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>
<div>
SAMPLE CONTENT1. SAMPLE CONTENT2. SAMPLE CONTENT3. SAMPLE CONTENT4. SAMPLE CONTENT5.
SAMPLE CONTENT6. SAMPLE CONTENT7. SAMPLE CONTENT8. SAMPLE CONTENT9. SAMPLE CONTENT10.
</div>
</th>
</tr>
</table>
</body>
</html>
CSS
th{
border: black 5px solid;
}
th div{
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 5px;
width: 125px;
height: 125px;
}
为什么我看不到可滚动文本的前几行？
删除对齐项目：居中
th{
border: black 5px solid;
}
th div{
display: flex;
justify-content: center;
overflow-y: auto;
padding: 5px;
width: 125px;
height: 125px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>
<div>
SAMPLE CONTENT1. SAMPLE CONTENT2. SAMPLE CONTENT3. SAMPLE CONTENT4. SAMPLE CONTENT5.
SAMPLE CONTENT6. SAMPLE CONTENT7. SAMPLE CONTENT8. SAMPLE CONTENT9. SAMPLE CONTENT10.
</div>
</th>
</tr>
</table>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
