Palaniichuk Dmytro
Reputation: 3173
Responsive table with column
I've got the table with four columns, on mobile should be stacked column using only CSS and possible Javascript with 'th' for each of the column. I found the solution, but there is stacked row not a column. I've tried this one method How to Create Responsive Tables in WordPress
I use foundation zurb 6, also it possible to make with simple div. Not allowed with flex box.
/*=========================================================
TABLE
=========================================================*/
.table-pricing tr,
.table-pricing tr:nth-child(even) {
background-color: white;
}
.table-pricing thead {
border-bottom: 0.3125rem solid gray;
}
.table-pricing thead th {
font-size: rem-calc(25);
text-align: center;
padding-left: 0;
padding-right: 0;
}
.table-pricing tr {
height: rem-calc(79);
border-bottom: 1px solid gray;
}
.table-pricing .table-pricing-lastrow {
border-bottom: 0;
}
.table-pricing-kind {
text-align: left;
}
.table-pricing-price {
font-size: rem-calc(25);
color: pink;
font-weight: 600;
}
.table-pricing-plan {
text-align: center;
border-left: 1px solid gray;
width: rem-calc(243);
}
.table-pricing-plan.selected {
background-color: gray;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.table-pricing-plan.submit {
padding-top: rem-calc(35);
padding-bottom: rem-calc(35);
border-left: 0;
}
.table-pricing-plan.submit a {
margin-bottom: 0;
}
@medium sreen(max-width:640px) {
table {width:100%;}
thead {display: none;}
/* // tr:nth-of-type(2n) {background-color: inherit;}
// tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} */
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i] = [];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
</script>
<div class="row">
<div class="small-12 column">
<table class="table-pricing">
<thead>
<tr>
<th> </th>
<th>Bussiness Essentials</th>
<th>Business</th>
<th>Business Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-pricing-kind">Price</td>
<td class="table-pricing-plan selected"><span class="table-pricing-price">3.88 EUR</span> / month.</td>
<td class="table-pricing-plan"><span class="table-pricing-price">5.00 EUR</span> / month.</td>
<td class="table-pricing-plan"><span class="table-pricing-price">7.00 EUR</span> / month.</td>
</tr>
<tr>
<td class="table-pricing-kind">Fully installed Office on PC / MAC</td>
<td class="table-pricing-plan selected"> <span class="icon icon-close"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
</tr>
<tr>
<td class="table-pricing-kind">Online Office</td>
<td class="table-pricing-plan selected"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
</tr>
<tr>
<td class="table-pricing-kind">1 TB File Storage</td>
<td class="table-pricing-plan selected"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
</tr>
<tr>
<td class="table-pricing-kind">HD video conferences</td>
<td class="table-pricing-plan selected"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-close"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
</tr>
<tr>
<td class="table-pricing-kind">Business email</td>
<td class="table-pricing-plan selected"> <span class="icon icon-check"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-close"></span></td>
<td class="table-pricing-plan"> <span class="icon icon-check"></span></td>
</tr>
<tr class="table-pricing-lastrow">
<td></td>
<td class="table-pricing-plan submit"><a class="button secondary" href="#">Choose</a></td>
<td class="table-pricing-plan submit"><a class="button secondary" href="#">Choose</a></td>
<td class="table-pricing-plan submit"><a class="button secondary" href="#">Choose</a></td>
</tr>
</tbody>
</table>
</div>
</div>Link to Codepen
Upvotes: 0
Views: 489
Answers (2)
cpinamtz
Reputation: 853
The @media syntax is incorrect. You have this:
@medium sreen(max-width:640px)
And it has to be like this:
@media screen and (max-width: 600px)
In addition, you have to let an space between 'and' and the opening parenthesis.
So, Grezvany13 it wasn't impossible to solve it ;)
Result: Codepen
Upvotes: 1
Grezvany13
Reputation: 26
With tables your request would be impossible, since it would require to modify the structure of HTML.
The easiest solution would be to create 3 (responsive) columns, with some fancy CSS. Here's a simple (yet working) example (based on Bootstrap):
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3" id="col1">
<div class="row"> </div>
<div class="row">Price</div>
<div class="row">Fully installed Office on PC / MAC</div>
<div class="row">Online Office</div>
<div class="row">1 TB File Storage</div>
<div class="row">HD video conferences</div>
<div class="row">Business email</div>
<div class="row"> </div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="row">Bussiness Essentials</div>
<div class="row" data-th="Price">3.88 EUR / month</div>
<div class="row" data-th="Fully installed Office on PC / MAC"> </div>
<div class="row" data-th="Online Office"> </div>
<div class="row" data-th="1 TB File Storage"> </div>
<div class="row" data-th="HD video conferences"> </div>
<div class="row" data-th="Business email"> </div>
<div class="row"><a class="btn">choose</a></div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="row">Business</div>
<div class="row" data-th="Price">5.00 EUR / month</div>
<div class="row" data-th="Fully installed Office on PC / MAC"> </div>
<div class="row" data-th="Online Office"> </div>
<div class="row" data-th="1 TB File Storage"> </div>
<div class="row" data-th="HD video conferences"> </div>
<div class="row" data-th="Business email"> </div>
<div class="row"><a class="btn">choose</a></div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="row">Business Premium</div>
<div class="row" data-th="Price">7.00 EUR / month</div>
<div class="row" data-th="Fully installed Office on PC / MAC"> </div>
<div class="row" data-th="Online Office"> </div>
<div class="row" data-th="1 TB File Storage"> </div>
<div class="row" data-th="HD video conferences"> </div>
<div class="row" data-th="Business email"> </div>
<div class="row"><a class="btn">choose</a></div>
</div>
</div>
</div>
CSS:
@media (max-width: 768px) {
#col1 {
display: none;
}
.col-sm-12 {}
.col-sm-12 > div {
position: relative;
padding-left: 50%;
}
.col-sm-12 > div:before {
content: attr(data-th);
position: absolute;
left: 0;
}
}
http://codepen.io/anon/pen/xEJyyo
Upvotes: 0