我有一个包含四列的表格，在移动设备上应该仅使用 CSS 和可能的 Javascript 将列堆叠起来，每一列都带有“th”。我找到了解决方案，但是堆叠的行不是列。我试过这一种方法 How to Create Responsive Tables in WordPress
我用的是foundation zurb 6，也可以用简单的div制作。不允许使用 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>链接到 Codepen
最佳答案
@media 语法不正确。你有这个:
@medium sreen(max-width:640px)
它必须是这样的:
@media screen and (max-width: 600px)
此外，您必须在“and”和左括号之间留一个空格。
所以，Grezvany13解决它并非不可能；)
结果:Codepen
关于javascript - 带列的响应表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40052522/