我有一個有四列的表，我需要一個響應表，其中每列將在其他列下方，但我不知道該怎麼做。我希望沒有使用Javascript有一些答案。按列的響應表
現在我有一個這樣的表：
+---------------+
| Some text |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
我需要在較小的分辨率來得到這樣的結果：
等。它有可能嗎？這是我的JSfiddle。 jsfiddle的答案也是最好的。
表有響應性的問題，因爲表數據是用行寫的，所以代碼中的數據看起來如此：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;
}
}
執行此操作的最佳方法是使用div s，並使用CSS'display: table,display: table-row和display: table-cell屬性以及一些斷點。否則，你會有很多醜陋的代碼。這不是語義上最大的解決方案，但就響應速度而言，它確實有效。
看到這個優秀的文章更多的幫助：http://css-tricks.com/almanac/properties/d/display/。
它不是很漂亮，但你可以嘗試讓TR標籤欄和TD標籤行
tr{
display: inline;
float:left;
}
td{
display: block;
}
這正是Bootstrap's Grid System是，由於自舉被設計成適合移動設備。您可以使用代碼設置文檔，例如
<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>
而且它會自動調整小屏幕尺寸的大小。
這是一個有點長的工作，但我的主要想法是每個列轉換成一個表，並將其包裝成一個「主」表，然後使用馬託格羅索解決方案。
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;
}
}
可以請你轉換的內聯樣式的CSS和更新小提琴 – andrew 2014-09-28 22:25:33
爲了做到這一點，你必須改變你的標記結構 – Danield 2014-09-28 22:30:51