移动端表格布局优化求助：实现Timestamp跨3列显示

针对你的需求，我们可以通过CSS媒体查询+Flex布局实现移动端3列布局，让Timestamp跨列左下方对齐，同时保留桌面端原有表格结构，无需嵌套表格避免对齐问题。

步骤1：修改CSHTML结构 #

给表格和关键元素添加自定义类，方便CSS定位：

<table class="table table-hover custom-consumption-table" style="align-content:center">
    <thead>
        <tr>
            <th scope="col">Timestamp</th>
            <th scope="col">Coffee pod</th>
            <th scope="col">Coffee machine</th>
            <th scope="col">Person</th>
        </tr>
    </thead>
    <tbody>
        @{foreach(var consumptionElement in Model.ConsumptionLog)
        {
        <tr class="consumption-row">
            <th scope="row" class="timestamp-cell">
                <span>@consumptionElement.ConsumptionTimestamp.ToString("dd.MM.yyyy")</span>
                <span>@consumptionElement.ConsumptionTimestamp.ToString("HH:mm:ss")</span>
            </th>
            <td class="pod-cell">
                <figure>
                    <img src="@consumptionElement.CoffeePod.PodPictureDisplay" alt="Coffee pod image" width="100px">
                    <figcaption>@consumptionElement.CoffeePod.Name (@consumptionElement.CoffeePod.Brand)</figcaption>
                </figure>
            </td>
            <td class="machine-cell">
                <figure>
                    <img src="@consumptionElement.CoffeeMachine.ImageDisplay" alt="Coffee machine image" width="50px">
                    <figcaption>@consumptionElement.CoffeeMachine.Nickname</figcaption>
                </figure>
            </td>
            <td class="person-cell">
                <figure>
                    <img src="@consumptionElement.Person.ProfilePictureDisplay" alt="Person profile image" width="100px">
                    <figcaption>@consumptionElement.Person.FullName</figcaption>
                </figure>
            </td>
        </tr>
        }}
    </tbody>
</table>

步骤2：添加响应式CSS #

通过媒体查询区分移动端和桌面端布局：

/* 移动端适配（屏幕宽度≤768px） */
@media (max-width: 768px) {
    /* 隐藏桌面端表头 */
    .custom-consumption-table thead {
        display: none;
    }

    /* 每行改为Flex垂直布局 */
    .custom-consumption-table .consumption-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.5rem;
    }

    /* 三个内容单元格平分宽度，居中显示 */
    .custom-consumption-table .pod-cell,
    .custom-consumption-table .machine-cell,
    .custom-consumption-table .person-cell {
        flex: 1;
        text-align: center;
        padding: 0 0.5rem;
    }

    /* 时间戳占满整行，左对齐放在底部 */
    .custom-consumption-table .timestamp-cell {
        flex-basis: 100%;
        text-align: left;
        padding: 0.5rem 0.5rem 0;
        border-top: none;
    }

    /* 缩小图片和文字适配移动端 */
    .custom-consumption-table figure img {
        width: 60px;
        height: auto;
    }

    .custom-consumption-table figure figcaption {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
}

/* 桌面端保持原表格布局 */
@media (min-width: 769px) {
    .custom-consumption-table .consumption-row {
        display: table-row;
    }
}

效果说明 #

• 桌面端：保留你原有的4列表格布局，正常显示所有内容。
• 移动端：自动切换为3列布局，Coffee pod/machine/person平分宽度横向排列，Timestamp占满整行左下方对齐，完全符合你的需求。
• 无需嵌套表格，避免了结构混乱和对齐问题，代码简洁易维护。

内容的提问来源于stack exchange，提问作者Martin Ferenec