Css生成了替代表行的表断点

Question

我有一个类似于的表格布局

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Content 1</div>
<div style="display:table-cell">Content 2</div>
<div style="display:table-cell">Content 3</div>
<div style="display:table-cell">Content 4</div>
</div>
</div>

这将在一行中正确显示4列。

我想要一个媒体查询，它将显示该表，每行有2列。

出于格式化的原因，我需要它是一个表，而不是一个flexbox或引导程序网格。

有没有其他方法可以在单元格之间创建断点，从而实现全css解决方案？

Answer 1

您可以使用mediaquerie 将显示切换到另一个值

element {
display: inline-block;
}
@media (max-width: 600px) {
element {
display: block;
}
}

代码中的快速示例，添加了var((以保持样式内联。。。

:root {
--parent: table;
--row: table-row;
--cell: table-cell;
}
@media (max-width:800px) {
:root {
--row: grid;
--cell: block;
}
[style="display:var(--row)"] {
grid-template-columns: repeat(2, auto)
}
}
body>* {
margin: auto;
border: solid 1px;
}
body> div>div>div, td {
border: solid 1px;
padding: 3px;
margin: 3px;
}

<div style="display:var(--parent);">
<div style="display:var(--row)">
<div style="display:var(--cell)">Content 1</div>
<div style="display:var(--cell)">Content 2</div>
<div style="display:var(--cell)">Content 3</div>
<div style="display:var(--cell)">Content 4 ---</div>
</div>
</div>
Display:reset works for any HTML element, even if its an HTML table..
<table style="display:var(--parent);">
<tr style="display:var(--row)">
<td style="display:var(--cell)">Content 1</td>
<td style="display:var(--cell)">Content 2</td>
<td style="display:var(--cell)">Content 3</td>
<td style="display:var(--cell)">Content 4 ---</td>
</tr>
</table>