无法使用可滚动单元格将表格单元格内容居中

debugcn 发表于 Dev

杨德格

我有一个表格，其中一些单元格具有足够的文本内容，因此需要滚动，而某些单元格的内容仅占用一行文本。问题是，我需要在用例中使用div，并且在保持可滚动单元格正常工作的同时，似乎无法使文本垂直居中。

这是我的HTML和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>

我尝试使用

display: flex;
align-items: center;

在div中，但这会使可滚动div的顶部隐藏在单元格顶部上方...

如何更改CSS以统一允许单行单元格垂直居中，但可滚动单元格以它们现在的方式工作？

Imran Fakhrul |

使用现有的CSS和HTML，只需尝试添加以下内容：

th div {
    display: flex;
}

th div p {
    margin: auto;
}

这将起作用！如果您不希望文本水平居中：

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>

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

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