Reputation: 4808
Responsive table by columns
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.
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.
Upvotes: 15
Views: 53070
Answers (5)
Reputation: 31
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.
http://jsfiddle.net/kLmvwsp0/2/
HTML Page
<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
/*
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;
}
}
Upvotes: 3
Reputation: 1302
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...
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:
<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;
}
}
Upvotes: 15
Reputation: 2429
This is exactly what Bootstrap's Grid System is for, as Boostrap is designed to be mobile friendly. You can set up a document with code such as
<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.
Upvotes: 1
Reputation: 357
it's not very nice, but you can try to make tr tags columns and td tag rows
tr{
display: inline;
float:left;
}
td{
display: block;
}
Upvotes: 0
Reputation: 6104
The best way to do this would be with divs and using CSS' display: table, display: table-row and display: table-cell properties, 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.
See this excellent article for more help: http://css-tricks.com/almanac/properties/d/display/.
Upvotes: 0