Отзывчивого стол макет предложение

Question

Существует простой способ преобразования макета на основе таблицы на сайте с адаптивным дизайном без установки ширины и высоты каждой строки и ячеек в моем коде

Answer 1

Если фиксированное количество столбцов чем у меня есть одно решение для вас, пример кода и экрана ниже.

Настольный экран [! [Ввести описание изображения здесь] [1]] [1]

Мобильный экран (ширина < 760)

[! [Ввести описание изображения здесь] [ 2]] [2]

Html код для Над экраном

<table> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Phone Number</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Anil</td> 
       <td>Kumar</td> 
       <td>+91 9022669735</td> 
      </tr> 
      <tr> 
       <td>Sunil</td> 
       <td>Kumar</td> 
       <td>+91 9405889360</td> 
      </tr> 
     </tbody> 
     </table> 

Стили

table { 
      width: 100%; 
      border-collapse: collapse; 
     } 
     tr:nth-of-type(odd) { 
      background: #eee; 
     } 
     th { 
      background: #333; 
      color: white; 
      font-weight: bold; 
     } 
     td, th { 
      padding: 6px; 
      border: 1px solid #ccc; 
      text-align: left; 
     } 
     @media only screen and (max-width: 760px), 
     (min-device-width: 768px) and (max-device-width: 1024px) { 

      /* Force table to not be like tables anymore */ 
      table, thead, tbody, th, td, tr { 
       display: block; 
      } 
      /* Hide table headers (but not display: none;, for accessibility) */ 
      thead tr { 
       position: absolute; 
       top: -9999px; 
       left: -9999px; 
      } 
      tr { border: 1px solid #ccc; } 

      td { 
       /* Behave like a "row" */ 
       border: none; 
       border-bottom: 1px solid #eee; 
       position: relative; 
       padding-left: 50%; 
      } 

      td:before { 
       /* Now like a table header */ 
       position: absolute; 
       /* Top/left values mimic padding */ 
       top: 6px; 
       left: 6px; 
       width: 45%; 
       padding-right: 10px; 
       white-space: nowrap; 
      } 
      td:nth-of-type(1):before { content: "First Name"; } 
      td:nth-of-type(2):before { content: "Last Name"; } 
      td:nth-of-type(3):before { content: "Phone Number"; } 
     } 

НАДЕЖДА ЭТО ПОМОЖЕТ ВАМ