Html 具有特定响应性的表

是否可以创建类似于表格的内容（即，它不需要是

），但当屏幕宽度缩小时，会按如下所述进行转换

宽屏幕（常规表格）：

中等屏幕（标题栏和休息栏）：

最小屏幕（只需将所有内容放在一列中）：

我一直在四处寻找类似的东西，但它似乎不存在。我也考虑过将数据放在

中，并对此进行了大量搜索，但我似乎没有找到类似的内容。我已经看到了大量的解决方案，这些解决方案针对的是具有单个定义的定义列表和具有多个定义的定义列表的硬编码宽度表布局，但这并不能真正满足我的期望

因此，我的问题是：这样做是可能的，还是我对网络技术要求过高

到目前为止，我得到的最接近的结果是这样的：

dt{
浮动：左；
清除：左；
宽度：200px；
保证金：0；
填充：10px；
字体大小：粗体；
}
dd{
浮动：左；
宽度：200px；
保证金：0；
填充：10px；
}
/*缺少功能：如果使其宽度变小，则tdX.2位于thX之下，而不是tdX.1之下*/

th1
td1.1
td1.2
th2
td2.1
td2.2

所以这实际上是响应性设计基础的一部分。因此，不要使用像素作为表格单元格宽度，而是使用百分比。百分比基于包含表格的元素的宽度。例如，如果它在主体中，那么这将是屏幕的宽度。如果它是一个宽度为400px的div或者别的什么，那么它将是它的一个百分比

因此，例如，如果只有3个单元格，请将“宽度”属性更改为33%

dt {
    float: left;
    clear: left;
    width: 33%;
    margin: 0;
    padding: 10px;
    font-weight: bold;
}

dd {
   float: left;
   width: 33%;
   margin: 0;
   padding: 10px;
}

这是怎么回事-

HTML

<div class="col-wrapper">
    <div class="th-block">
    first title
    </div>
<div class="td-wrap">
        <div class="td-item">
          td 1.1
        </div>
        <div class="td-item">
          td 1.2
        </div>
</div>
</div> <!-- first row close -->

<div class="col-wrapper">
    <div class="th-block">
    second title
    </div>
<div class="td-wrap">
        <div class="td-item">
          td 2.1
        </div>
        <div class="td-item">
          td 2.2
        </div>
</div>
</div> <!-- second row close -->

我还用Bootstrap制作了一个-

---

希望有帮助

如果可以按如下类似方式调整标记，则可以使用媒体查询：

dt，dd{
显示：内联块；
垂直对齐：顶部；
保证金：0；
}
@介质（最大宽度：480px）{
跨度{
显示：块；
}
}
@介质（最大宽度：320px）{
dt，dd，span{
显示：块；
}
}

th1
td1.1
td1.2
th2
td2.1
td2.2

既然您提到了它，我肯定会使用div元素而不是表格，因为表格更难管理，特别是在响应性布局中。我还想在这里使用一些jQuery，但没什么大不了的

HTML

<div id="sections">
  <section class="row-1">
    <p> **th1** </p>
    <p> **th2**</p>
  </section>

  <section class="row-2">
    <p class="row2-first">td1.1</p>

    <p class="row2-second">td2.1 </p>
  </section>

  <section class="row-3">
    <p class="row3-first">td1.2 </p>

    <p class="row3-second">td2.2 </p>
  </section>
</div>

jQuery:

.row-1 {
  width: 33.3333%;
  float: left;
}

.row-2 {
  width: 33.3333%;
  float: left;
}

.row-3 {
  width: 33.3333%;
  float: left;
}

@media all and (max-width: 799px) {
  .row-1,
  .row-2,
  .row-3 {
    width: 50%;
    float: left;
  }
}

@media all and (max-width: 499px) {
  .row-1,
  .row-2,
  .row-3 {
    width: 100%;
    float: none;
  }
}

jQuery(document).ready(function($){

if ($(window).width() < 800 && $(window).width() > 500) {
   $(".row3-first").insertAfter(".row2-first");
   $(".row3-second").insertAfter(".row2-second");
}
else {
   //do nothing
}
});

jQuery(document).ready(function($){

if ($(window).width() < 500) {
   $(".row2-first").insertAfter(".row1-first");
}
else {
   //do nothing
}
});

jQuery（文档）.ready（函数（$）{
如果（$（窗口）.width（）<800&$（窗口）.width（）>500）{
$（“.row3 first”）。后面插入（“.row2 first”）；
$（“.row3秒”）.insertAfter（“.row2秒”）；
}
否则{
//无所事事
}
});
jQuery（文档）.ready（函数（$）{
如果（$（窗口）.width（）<500）{
$（.row2 first”）.insertAfter（.row1 first”）；
}
否则{
//无所事事
}
});

我当前的示例并不完全符合您的要求，因为我需要为示例创建多个CSS类，以便根据您的图像完全重新排列元素，但我认为您可以了解如何完成它。您所需要做的就是添加几个CSS类并创建（实际上是复制粘贴）insertAfter函数。所以现在一切都是关于合并

您可以查看上的工作示例。

虽然非常有用，但我想与您分享我的最终解决方案，因为我发现它在语义上比建议的多个定义列表更清晰。当然，缺少的是类似于

标记的东西，用于创建漂亮的定义列表。通过使用表格，可以按照Pangloss答案中的说明进行类似操作，但要将所有数据保存在一起：

th{
显示：内联块；
最小宽度：400px；
文本对齐：左对齐；
垂直对齐：顶部；
}
运输署{
显示：内联块；
}
跨度{
显示：块；
最小宽度：400px；
}
@介质（最小宽度：800px）{
跨度{
显示：内联块；
}
}

th1
td1.1
td1.2
th2
td2.1
td2.2

如果所有尺寸都未知（取决于内容），则很难确定。也许是flexbox的一些把戏，但你可能不得不等到浏览器实现CSS网格。此外，它不需要是一个表，你需要使用

@media

查询某些资源或范围上元素的宽度。我不确定我是否完全理解这一点，但是你的例子似乎能与简单的html和css尽可能接近…看看代码笔，调整屏幕大小，然后刷新，你会看到它们在不同分辨率下是如何堆叠的。因此，它是关于在段落元素上添加新类，并以重新排列的方式复制粘贴insertAfter函数。我的解决方案不同，因为它允许您以任何方式重新排列元素，而不必担心它们在桌面上的堆叠方式。

@media (min-width:991px) {
.td-item {
  display:inline-table;
}
}

@media (min-width:768px) {
  .th-block, .td-wrap {
    display:inline-table;.
    vertical-align:top;
  }
}

<div id="sections">
  <section class="row-1">
    <p> **th1** </p>
    <p> **th2**</p>
  </section>

  <section class="row-2">
    <p class="row2-first">td1.1</p>

    <p class="row2-second">td2.1 </p>
  </section>

  <section class="row-3">
    <p class="row3-first">td1.2 </p>

    <p class="row3-second">td2.2 </p>
  </section>
</div>

.row-1 {
  width: 33.3333%;
  float: left;
}

.row-2 {
  width: 33.3333%;
  float: left;
}

.row-3 {
  width: 33.3333%;
  float: left;
}

@media all and (max-width: 799px) {
  .row-1,
  .row-2,
  .row-3 {
    width: 50%;
    float: left;
  }
}

@media all and (max-width: 499px) {
  .row-1,
  .row-2,
  .row-3 {
    width: 100%;
    float: none;
  }
}

jQuery(document).ready(function($){

if ($(window).width() < 800 && $(window).width() > 500) {
   $(".row3-first").insertAfter(".row2-first");
   $(".row3-second").insertAfter(".row2-second");
}
else {
   //do nothing
}
});

jQuery(document).ready(function($){

if ($(window).width() < 500) {
   $(".row2-first").insertAfter(".row1-first");
}
else {
   //do nothing
}
});