Skip to content Skip to sidebar Skip to footer

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. Unfortunate

Solution 1:

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>

Post a Comment for "Top Of Scrollable Element Is Hidden"