在浏览器调整大小时重新排序 CSS 表答案

【问题标题】：reorder css table on browser resize在浏览器调整大小时重新排序 CSS 表
【发布时间】：2017-09-19 11:44:59
【问题描述】：

是否可以在浏览器调整大小时对纯 css 表格重新排序，使一行三个单元格的表格变成一个三行一个单元格的表格？

我的代码是：

<div style="display:table; width:90%;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:70%; height:500px; border:1px solid #333;">cell 1</div>
    <div style="display:table-cell; width:5%; height:500px; border:1px solid #333;">cell 2</div>
    <div style="display:table-cell; width:25%; height:500px; border:1px solid #333;">cell 3</div>
  </div>
</div>

这给出了一个包含三个并排单元格的表格。

我想创建一个媒体查询，以便在特定浏览器宽度下，此表将重新排序以显示类似这样的内容...

<div style="display:table; width:90%;">
  <div style="display:table-row;"><div style="display:table-cell; width:100%; height:500px; border:1px solid #333;">cell 1</div></div>
  <div style="display:table-row;"><div style="display:table-cell; width:100%; height:25px; border:1px solid #333;">cell 2</div></div>
  <div style="display:table-row;"><div style="display:table-cell; width:100%; height:250px; border:1px solid #333;">cell 3</div></div>
  </div>
</div>

这可能吗？或者有更好的方法吗？

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过媒体查询来做到这一点。您需要在此处管理宽度。

您可以展开 sn-p 以在整页中查看此功能。

.rowLayout
{
	display:table-cell;
	height:500px;
	border:1px solid #333;
}

.width70{
	width:70%;
}

.width25{
	width:25%;
}

.width5{
	width:5%;
}

.rowDisplay{
display:table-row;
}

@media screen and  (max-width: 520px) 
{
.rowLayout
{
	display:block;
	height:100px;
	border:1px solid black;
}

.width70,.width25,.width5{
	width:100%;
}
.rowDisplay{
display:table;
}

}

<div style="display:table; width:90%;">
  <div class="rowDisplay">
    <div class="rowLayout width70" >cell 1</div>
    <div class="rowLayout width5" >cell 2</div>
    <div class="rowLayout width25" >cell 3</div>
  </div>
</div>

【讨论】：

这很好用。但是将单元格更改为块意味着表格行中有块，（如 content 但没有表格单元格（）。这可以接受吗？
此代码不会呈现实际的表格行。它使应用此类的组件在其本地范围内表现得像一个表格行。因此，它将在 css 中正常工作。无论如何，我现在已经把它放在另一个 css 类中，并应用了修复。

【解决方案2】：

首先，您应该将类名应用到 HTML 中的 DIV 标签（而不是内联样式），然后您可以通过类将表属性分配给它们并在媒体查询中更改它，如下例所示：（使用全屏视图并更改窗口宽度以查看效果）

.container_1 {
  display: table;
  width: 90%;
}

.x1 {
  display: table-row;
}

.x2 {
  display: table-cell;
  width: 33%;
  height: 100px;
  border: 1px solid #333;
}

@media screen and (max-width: 500px) {
  .x1 {
    display: block;
  }
  .x2 {
    display: table-row;
    width: 100%;
 }
}

<div class="container_1">
  <div class="x1">
    <div class="x2">cell 1</div>
    <div class="x2">cell 2</div>
    <div class="x2">cell 3</div>
  </div>
</div>

【讨论】：

【解决方案3】：

你的意思是这样的：

@media screen and (min-width: 480px) {
    table {
        width: 90%;
    }
}

【讨论】：

所有要做的就是设置表格的宽度，而不是重新排列结构中的元素。