可滚动元素的顶部被隐藏 [英] Top of scrollable element is hidden
本文介绍了可滚动元素的顶部被隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在一个项目中，该项目包括带有可滚动单元格的表格.这可能看起来不是使用表的最优雅方式，但这正是我的用例所适用的.不幸的是，我的单元格内容的顶部仍处于隐藏状态，无法滚动到它...
I am working on a project including a table with scrollable cells. This may not look like the most elegant way to use a table, but this is what works for my use case. Unfortunately, I the top portion of my cell content remains hidden, I cannot scroll to it...
这是项目中的一个很小的示例(一个更大的表中的单个单元格):
Here's a very small sample from the project (a single cell of a much larger table):
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;
}
为什么我看不到可滚动文本的前几行?
Why can't I see the top few lines of my scrollable text?
推荐答案
删除align-items:center
remove align-items:center
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>这篇关于可滚动元素的顶部被隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
