HTML和CSS根据窗口大小更改表格布局

我有一个一行有两列的表。它在大窗口上运行良好，但在小窗口上，我想将这两列“拆分”为不同的行。因此，每行只有一列。我确实看到了类似的情况（下面的代码），它使用了@media screen和（最大宽度：500px）。但这个例子是关于段落的

#dv-wrapper p {
  float: left;
  max-width: 50%;
}

@media screen and (max-width: 500px) {    
  #dv-wrapper {
    text-align: center;
  }

  #dv-wrapper p {
    float: none;
    text-align: left;
    display: inline-block;
  }
}

我不知道我的目标是否可以用HTML和CSS来实现。谁能帮我一下吗？

您可能希望将段落包装成单独的

div

，这样更易于控制-这将基本上使您的段落在500px以下的屏幕上具有100%的全宽-

您可以尝试一下

Html

<div class="table_data">
    <dl>
        <dt>1-1</dt>
        <dd>1-2</dd>
    </dl>
    <dl>
        <dt>2-1</dt>
        <dd>2-2</dd>
    </dl>
</div>

---

请提供您的代码，而不是其他代码。请检查引导。我不知道你的代码是什么样子的，所以我无法回答，但我想知道，它是否需要是一个表。听起来您可以使用

inline block

来处理两个块，这两个块将在足够宽的屏幕上并排显示，但在较窄的屏幕上，两个块将在另一个块的下方显示。不需要媒体查询。

dt, dd, dl {
    margin:0;
    padding:0;
    border-spacing:0;
}
dl {
    display:table;
    width:100%;
}
dt, dd {
    width:100%;
    display:block;
}
@media only screen and (min-width:768px) {
    dt, dd {
        width:50%;
        float:left;
    }
}