转置表 CSS 网格答案

【问题标题】：Transpose table CSS grid转置表 CSS 网格
【发布时间】：2022-12-16 07:49:14
【问题描述】：

我有很多列宽和几行短的表格数据，这在桌面屏幕上效果很好，但对于移动屏幕来说太宽了。我如何使这个“表格”响应 - 转置它 - 以便它在移动屏幕上又窄又高？它是由div组成的。

【问题讨论】：

标签： html css html-table css-grid transpose

【解决方案1】：

像这样使用 CSS 网格：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Andrew Koper">
    <title>CSS Grid responsive table</title>

    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
        }

        .container div {
            border: 1px solid black;
            font-size: 18px;
            text-align: center;
        }

        /* make table 'portait' instead of 'landscape' */
        @media (max-width: 820px) {
            .container {
                grid-template-columns: repeat(3, 100px);
                grid-template-rows: repeat(5, 30px);
                grid-auto-flow: column;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div>PRODUCT</div>
        <div>APPLE</div>
        <div>MANGO</div>
        <div>ORANGE</div>
        <div>BANANA</div>

        <div>Price</div>
        <div>$50</div>
        <div>$25</div>
        <div>$30</div>
        <div>$15</div>

        <div>Quantity</div>
        <div>1</div>
        <div>11</div>
        <div>8</div>
        <div>20</div>
    </div>

</body>

</html>

【讨论】：