可以创建看起来像表格的东西（即它不需要是<table></table>），但是当屏幕宽度缩小时会如下所述进行转换？
宽屏（常规表）：
-------------------------
| **th1** | td1.1 | td1.2 |
| **th2** | td2.1 | td2.2 |
-------------------------
中画面（标题栏和休息栏）：
-----------------
| **th1** | td1.1 |
| | td1.2 |
| **th2** | td2.1 |
| | td2.2 |
-----------------
最小屏幕（只需将所有内容放在一列中）：
---------
| **th1** |
| td1.1 |
| td1.2 |
| **th2** |
| td2.1 |
| td2.2 |
---------
我一直在四处寻找这样的东西，但它似乎并不存在。我还考虑将数据放在<dl></dl>中并对其进行了大量搜索，但我似乎找不到这样的东西。我已经看到了定义列表的大量解决方案，其中包含单个定义和带有多个定义的定义列表的硬编码宽度表布局，但这并不能满足我的期望。
我的问题是：是否有可能做这样的事情，或者我对网络技术要求太高了？
我到目前为止最接近的是这样的：
dt {
float: left;
clear: left;
width: 200px;
margin: 0;
padding: 10px;
font-weight: bold;
}
dd {
float: left;
width: 200px;
margin: 0;
padding: 10px;
}
/* missing feature: when made less wide, the tdX.2 is under thX and not under tdX.1 */<dl>
<dt>th1</dt>
<dd>td1.1</dd>
<dd>td1.2</dd>
<dt>th2</dt>
<dd>td2.1</dd>
<dd>td2.2</dd>
</dl>
答案 0 :(得分：2)
如果您可以像下面这样调整标记，则可以使用媒体查询：
dt, dd {
display: inline-block;
vertical-align: top;
margin: 0;
}
@media (max-width: 480px) {
span {
display: block;
}
}
@media (max-width: 320px) {
dt, dd, span {
display: block;
}
}<dl>
<dt>th1</dt>
<dd>
<span>td1.1</span>
<span>td1.2</span>
</dd>
</dl>
<dl>
<dt>th2</dt>
<dd>
<span>td2.1</span>
<span>td2.2</span>
</dd>
</dl>
jsFiddle example ，调整框架大小并查看。
答案 1 :(得分：0)
因此，这实际上是响应式设计基础的一部分。因此，不要使用表格单元格宽度的像素，而是使用百分比。百分比基于包含表的元素的宽度。例如，如果它在身体中，那么这将是屏幕的宽度。如果它是一个宽度为400像素的div或者其他东西，那么它就是一个百分比。
如果例如只有3个单元格，则将width属性更改为33％。
dt {
float: left;
clear: left;
width: 33%;
margin: 0;
padding: 10px;
font-weight: bold;
}
dd {
float: left;
width: 33%;
margin: 0;
padding: 10px;
}
答案 2 :(得分：0)
如此 - https://jsfiddle.net/4e8v5vrf/6/
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 -->
<强> CSS
@media (min-width:991px) {
.td-item {
display:inline-table;
}
}
@media (min-width:768px) {
.th-block, .td-wrap {
display:inline-table;.
vertical-align:top;
}
}
我还用Bootstrap制作了一个 - https://jsfiddle.net/4e8v5vrf/4/
希望有所帮助！答案 3 :(得分：0)
由于您提到它，我肯定会使用 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>
<强> CSS：
.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的：
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
}
});
我当前的示例并没有完全符合您的要求，因为我需要为示例创建多个CSS类，以根据您的图像完全重新排列元素，但我认为您可以了解如何完成它。您需要做的就是添加几个CSS类并创建（实际上复制粘贴） insertAfter函数。所以现在结合起来了。
您可以查看Codepen上的工作示例。
答案 4 :(得分：0)
尽管the answer of Pangloss非常有帮助，但我想与您分享我的最终解决方案，因为我发现它在语义上比提出的多重定义列表更清晰。缺少的东西当然是类似于<di>标签来创建漂亮的定义列表。通过使用表格，可以按照Pangloss的答案中的说明进行类似的操作，但将所有数据保存在一起：
th {
display: inline-block;
min-width: 400px;
text-align: left;
vertical-align: top;
}
td {
display: inline-block;
}
span {
display: block;
min-width: 400px;
}
@media (min-width: 800px) {
span {
display: inline-block;
}
}<table>
<tr>
<th>th1</th>
<td>
<span>td1.1</span>
<span>td1.2</span>
</td>
</tr>
<tr>
<th>th2</th>
<td>
<span>td2.1</span>
<span>td2.2</span>
</td>
</tr>
</table>
注意：大min-width是能够在屏幕上看到所有可能的状态......