响应不同行的 HTML css 表答案

【问题标题】：HTML css table responsive with different rows响应不同行的 HTML css 表
【发布时间】：2018-03-15 21:40:18
【问题描述】：

我正在从 db 构建简单的项目列表。此列表中的每个项目都包含 5 个元素。在桌面屏幕上，我有足够的空间将它们全部显示成这样：

原则上，上面的示例是使用这个 css 表生成的：

<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell img">PHOTO</div>
            <div class="divTableCell title">TITLE</div>
            <div class="divTableCell price">PRICE</div>
            <div class="divTableCell bids">BIDS</div>
            <div class="divTableCell timeleft">TIME LEFT</div>
        </div>
    </div>
</div>

.divTable {
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}

我正在寻找使用 CSS 媒体查询以不同方式显示移动设备结果的解决方案：

-------------------------
IMG | Title
    | Price Bids TimeLeft
-------------------------

每一行都是在后端生成的，所以我可以更改整个 html 结构，但我无法控制它显示的宽度，有没有任何选项可以仅使用 css 和媒体查询来实现这样的事情？你能指出我正确的方向吗？

【问题讨论】：

对Responsive tables, the smart way的答案有帮助吗？
谢谢你！！我确信使用来自回复的信息我将能够解决我的问题。
我应该发布有效的答案吗？

标签： html css responsive-design responsive

【解决方案1】：

您是否尝试进行媒体查询？我只是给你一个提示：

HERE 用于显示/对齐 div

HERE 用于媒体查询

尝试在 div 标签的 CSS 中使用 display 属性。

不要忘记在媒体查询中进行更改，否则它将改变一切。

祝你好运:)

【讨论】：

是的，我已经尝试过，但可以得到我想要的结果。我会阅读更多。