我有四列的表格，在移动设备上应该只使用CSS堆叠列，并且每个列都可以使用带有'th'的Javascript。我找到了解决方案，但是堆叠的行不是列。我尝试过这种方法How to Create Responsive Tables in WordPress
我使用基础zurb 6，也可以用简单的div制作。柔性盒不允许使用。
/*=========================================================
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
答案 0 :(得分：1)
@media 语法不正确。你有这个：
@medium sreen(max-width:640px)
它必须是这样的：
@media screen and (max-width: 600px)
此外，您必须在“和”和左括号之间留出空格。
所以，Grezvany13解决它并非不可能;）
结果：Codepen
答案 1 :(得分：0)
使用表格您的请求是不可能的，因为它需要修改HTML的结构。
最简单的解决方案是创建3个（响应式）列，其中包含一些奇特的CSS。 这是一个简单（但仍在工作）的例子（基于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;
}
}