[ANSWERED] html – Cannot center table cell content with scrollable cells

Question 1

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>

Question 2

Please add this CSS code.

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

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

Best regards.

Question 3

Use max-height instead height

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

Question 4

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?

Bollate

[ANSWERED] html – Cannot center table cell content with scrollable cells

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Paul T.

Comment posted by YangTegap

Comment posted by Sunil

Comment posted by Temani Afif

Comment posted by YangTegap

By

Related Post

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate