Html 按列响应表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26090244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive table by columns
提问by Jaroslav Klim?ík
I have a table with four columns and I need to have a responsive table where each column will be below the other but I don't know how to do it. I hope that there is some answer without using Javascript.
我有一个有四列的表格，我需要一个响应式表格，其中每一列都在另一列下方，但我不知道该怎么做。我希望在不使用 Javascript 的情况下有一些答案。
Now I have a table like this:
现在我有一张这样的表：
+---------------+
| Some text |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
And I need to get this result in smaller resolution:
我需要以较小的分辨率得到这个结果：
+-----------+
| Some text |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
And so on. Is it somehow possible? Here is my JSfiddle. Also the answer in jsfiddle would be best.
等等。它以某种方式可能吗？这是我的JSfiddle。jsfiddle 中的答案也是最好的。
回答by ma?o
Table have a problem with responsivity, because table datas are written by lines, so data in code looks thus: A, B, C, D, A, B, C, D... not A, A, A, A, B, B, B, B...
表的响应性有问题，因为表数据是按行写的，所以代码中的数据是这样的：A、B、C、D、A、B、C、D...不是A、A、A、A、B ，乙，乙，乙...
So you not get output with datas in the right order.
所以你不能以正确的顺序输出数据。
If you use media query, output looks thus:
如果您使用媒体查询，则输出如下所示：
@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
}
You need convert your table to this enrollment:
您需要将您的表格转换为此注册：
HTML:
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:
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;
}
}
回答by FeRRi
It's a little bit long work but the my main idea is to convert each column in a table and wrap it into a "main" table then use the ma?o solution.
这是一个有点长的工作，但我的主要想法是转换表中的每一列并将其包装到“主”表中，然后使用 ma?o 解决方案。
http://jsfiddle.net/kLmvwsp0/2/
http://jsfiddle.net/kLmvwsp0/2/
HTML Page
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 style sheet
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;
}
}
回答by Aeolingamenfel
This is exactly what Bootstrap's Grid Systemis for, as Boostrap is designed to be mobile friendly. You can set up a document with code such as
这正是Bootstrap 的 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>
And it will automatically resize for smaller screen sizes.
它会自动调整大小以适应较小的屏幕尺寸。
回答by Ian
The best way to do this would be with divs and using CSS' display: table, display: table-rowand display: table-cellproperties, along with some breakpoints. Otherwise, you're going to have a lot of ugly code. This isn't the semantically greatest solution, but as far as responsive goes, it does work.
要做到这一点，最好的办法是用div秒和使用CSS” display: table，display: table-row和display: table-cell性质，有一些断点一起。否则，您将拥有很多丑陋的代码。这不是语义上最好的解决方案，但就响应式而言，它确实有效。
See this excellent article for more help: http://css-tricks.com/almanac/properties/d/display/.
请参阅这篇优秀文章以获得更多帮助：http: //css-tricks.com/almanac/properties/d/display/。
回答by Michal Va?ut
it's not very nice, but you can try to make trtags columns and tdtag rows
这不是很好，但是您可以尝试制作tr标签列和td标签行
tr{
display: inline;
float:left;
}
td{
display: block;
}
