我有一个包含四列的表格，我需要一个响应表，每列都在另一列之下，但我不知道该怎么做。我希望在不使用Javascript的情况下有一些答案。
现在我有一张这样的表：
+---------------+
| Some text |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
我需要以较小的分辨率获得此结果：
+-----------+
| Some text |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
等等。它有可能吗？这是我的JSfiddle。 jsfiddle的答案也是最好的。
答案 0 :(得分：11)
表有响应性问题，因为表数据是用行写的，所以代码中的数据看起来是这样的：A，B，C，D，A，B，C，D ......不是A，A，A， A，B，B，B，B ......
因此，您无法以正确的顺序获得数据输出。
如果您使用媒体查询，则输出如下：
@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
}
您需要将表格转换为此注册：
HTML：
<table>
<tr>
<td colspan="2">Some title</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td style="text-align: center; background-color: #e8e8e8;"> <span style="color: #1e2a64;"><strong>Title</strong></span>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong> <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;"> <strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>
</td><td>
<table>
<tr>
<td style="text-align: center; background-color: #dedcdd;"><strong> <span style="color: #1e2a64;">Title2</span></strong>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong> <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;"> <strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>
CSS：
@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
tr tr{
margin-bottom:0;
}
}
答案 1 :(得分：2)
这正是Bootstrap's Grid System的用途，因为Boostrap旨在实现移动友好。您可以使用
等代码设置文档<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
对于较小的屏幕尺寸，它会自动调整大小。
答案 2 :(得分：1)
这是一个有点长的工作，但我的主要想法是转换表中的每一列并将其包装到“主”表中，然后使用maťo解决方案。
http://jsfiddle.net/kLmvwsp0/2/
HTML页面
<table align="center" style="width:50%">
<colgroup>
<col width="50%" />
</colgroup>
<!-- Group 1-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 1</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 1</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 2-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 2</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 2</td>
</tr>
</tbody>
</table>
</td>
</table>
<hr />
<table align="center" style="width:100%">
<colgroup>
<col width="35%" />
</colgroup>
<!-- Group 1-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 1</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 1</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 2-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 2</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 2</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 3-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 3</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 3</td>
</tr>
</tbody>
</table>
</td>
</table>
CSS样式表
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
@media all and (max-width: 500px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
}
答案 3 :(得分：0)
它不是很好，但您可以尝试将 tr 标记列和 td 标记行
tr{
display: inline;
float:left;
}
td{
display: block;
}
答案 4 :(得分：-1)
执行此操作的最佳方式是使用div并使用CSS＆＃39; display: table，display: table-row和display: table-cell属性以及一些断点。否则，你将会遇到很多丑陋的代码。这不是语义上最好的解决方案，但就响应而言，它确实有效。
请参阅此优秀文章以获取更多帮助：http://css-tricks.com/almanac/properties/d/display/。