使用css垂直堆栈表td元素

在这个问题中，您希望了解如何使用CSS垂直堆叠表格的单元格（td元素）。以下是一个简单的示例，说明如何使用CSS Flexbox布局来实现这一目标：

首先，创建一个HTML文件，并在其中添加一个表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>垂直堆栈表格单元格</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
</body>
</html>

接下来，在同一目录下创建一个名为styles.css的CSS文件，并添加以下代码：

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    padding: 10px;
}

tr {
    display: flex;
    flex-direction: column;
}

这个示例中的CSS代码将表格的单元格（td元素）垂直堆叠在一起。display: flex属性将td元素设置为弹性布局，align-items: center和justify-content: center属性将td元素内的内容垂直和水平居中。tr元素的display: flex和flex-direction: column属性将表格单元格垂直堆叠。

这种方法可以让您轻松地使用CSS垂直堆栈表格单元格。