Таблица ответов со столбцом

Question

У меня есть таблица с четырьмя столбцами, на мобильном телефоне должен быть столбец с использованием только CSS и возможного Javascript с «th» для каждого столбца. Я нашел решение, но есть строка с колонтитулом. Я пробовал этот метод 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

Answer 1

С таблицами Ваш запрос было бы невозможно, так как для этого потребуется изменить структуру HTML.

Простейшим решением было бы создать 3 (отзывчивых) столбца с некоторыми фантазийными CSS. Вот простой (пока работает) пример (на основе Bootstrap):

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-3" id="col1"> 
     <div class="row">&nbsp;</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">&nbsp;</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">&nbsp;</div> 
     <div class="row" data-th="Online Office">&nbsp;</div> 
     <div class="row" data-th="1 TB File Storage">&nbsp;</div> 
     <div class="row" data-th="HD video conferences">&nbsp;</div> 
     <div class="row" data-th="Business email">&nbsp;</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">&nbsp;</div> 
     <div class="row" data-th="Online Office">&nbsp;</div> 
     <div class="row" data-th="1 TB File Storage">&nbsp;</div> 
     <div class="row" data-th="HD video conferences">&nbsp;</div> 
     <div class="row" data-th="Business email">&nbsp;</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">&nbsp;</div> 
     <div class="row" data-th="Online Office">&nbsp;</div> 
     <div class="row" data-th="1 TB File Storage">&nbsp;</div> 
     <div class="row" data-th="HD video conferences">&nbsp;</div> 
     <div class="row" data-th="Business email">&nbsp;</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

Answer 2

@media синтаксис неверен , У вас есть это:

@medium sreen(max-width:640px) 

И это должно быть так:

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

Кроме того, вы должны позволить в пространство между «и» и открывающей скобкой.

Так, Grezvany13 не было невозможно решить;)

Результат: Codepen