javascript - 带列的响应表

Question

我有一个包含四列的表格，在移动设备上应该仅使用 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

Answer 1

@media 语法不正确。你有这个:

@medium sreen(max-width:640px)

它必须是这样的:

@media screen and (max-width: 600px)

此外，您必须在“and”和左括号之间留一个空格。

所以，Grezvany13解决它并非不可能；)

结果:Codepen