可滚动元素的顶部被隐藏

debugcn 发表于 Dev

杨德格

我正在一个项目中，该项目包括带有可滚动单元格的表格。这可能看起来不是使用表的最优雅的方式，但这正是我的用例所适用的。不幸的是，我的单元格内容的顶部仍处于隐藏状态，无法滚动到它。

这是项目中的一个很小的示例（一个更大表的单个单元格）：

的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;
}

为什么我看不到可滚动文本的前几行？

DCR

删除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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。