Question

是否可以在浏览器调整大小上重新排序纯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>

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

Answer 1

您可以使用媒体查询执行此操作。您需要在此管理宽度。

您可以展开代码段，以便在整页中查看此内容。

＆＃13;

.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;
}

}

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

.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%;
 }
}

＆＃13;

<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>

＆＃13;

Answer 3

你的意思是这样的：

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

您可以在以下网址了解更多相关信息：

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

在浏览器调整大小时重新排序css表

3 个答案: