Cannot center table cell content with scrollable cells

Question

I have a table with some cells with enough text content that they need to be scrollable and some cells that have content only taking up one line of text. The problem is, I need to use a div for my use case and can't seem to center the text vertically while keeping the scrollable cells working as intended.

Here is my HTML and CSS

th{
    border: black 5px solid;
}

th div{
    overflow-y: auto;
    padding: 5px;
    width: 125px;
    height: 125px;
}

th div p{
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

    <table>
        <tr>
            <th>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem a rerum alias labore, sed dolorum
                        at debitis sint tenetur velit fugit officiis id eos provident quae ipsum ea? Doloremque,
                        quaerat?</p>
                </div>
            </th>
            <th>
                <div>
                    <p>lorem ipsum</p>
                </div>
            </th>
        </tr>
    </table>

</body>

</html>

I have tried using

display: flex;
align-items: center;

in the div, but that makes the top portion of the scrollable div to be hidden above the top of the cell...

How can I alter my CSS to uniformly allow single line cells to be centered vertically, but scrollable cells to work the way they do now?

Trying the runnable example above, I'm not following what the issue seems to be? Looks ok to me. — Paul T., Jan 16 '21 at 16:34
@PaulT. So, the lorem ipsum in the right cell is at the top of the cell. I want it to be centered vertically, but when I try doing that, it cuts off the top of the content in my left cell — YangTegap, Jan 16 '21 at 16:40
the duplicate I gave in your old question aready gives you the reason and the fix — Temani Afif, Jan 16 '21 at 19:29

score 1 · Answer 1 · edited Jan 16 '21 at 17:14

1

Use max-height instead height

th div {
    overflow-y: auto;
    padding: 5px;
    width: 125px;
    max-height: 125px;
}

edited Jan 16 '21 at 17:14

Paul T.

4,703
11
25
29

answered Jan 16 '21 at 16:44

Abhishek Kasera

46
3

score 1 · Answer 2 · answered Jan 16 '21 at 16:51

1

Please add this CSS code.

th div p {
  max-height: 115px;
}

div {
  vertical-align: middle;
  display: table-cell;
}

Best regards.

answered Jan 16 '21 at 16:51

Imran · Accepted Answer · 2021-01-16T17:10:44.127

With you existing css and html, just try adding this:

th div {
    display: flex;
}

th div p {
    margin: auto;
}

This will work! And if you don't want your text to be horizontally centered:

th div p {
    margin: auto 0;
}

th{
    border: black 5px solid;
}

th div{
    overflow-y: auto;
    padding: 5px;
    width: 125px;
    height: 125px;
    display: flex;
}

th div p{
    margin: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

    <table>
        <tr>
            <th>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem a rerum alias labore, sed dolorum
                        at debitis sint tenetur velit fugit officiis id eos provident quae ipsum ea? Doloremque,
                        quaerat?</p>
                </div>
            </th>
            <th>
                <div>
                    <p>lorem ipsum</p>
                </div>
            </th>
        </tr>
    </table>

</body>

</html>

This did exactly what I wanted! Thank you! – YangTegap Jan 16 '21 at 19:30 — YangTegap, Jan 16 '21 at 19:30

Cannot center table cell content with scrollable cells

3 Answers3