Адаптивная таблица под телефон с помощью HTML и CSS

tables

Таблицы в HTML ведут себя очень непредсказуемо. Язык интернета постоянно развивается, а таблицы остаются прежними. И меняться, похоже, не собираются. Они плохо поддаются стилизации посредством CSS и принципам адаптивности. Но я всё-таки нашёл способ, как сделать таблицу «отзывчивой», адаптивной.

Автор описываемого мною метода – Майкл Чен, который предложил изящный метод придания таблице адаптивности. Он присвоил ячейкам таблицы атрибут «data-label», пришедший к нам из Exel, в соответствии с колонкой, в которой располагается ячейка.

Ниже приведен код рабочей таблицы.

HTML:

<!DOCTYPE html>
<html lang="ru"><head>
        <title>адаптивная таблица</title>       
        <meta content="description" name="description">
        <meta content="keywords" name="keywords">
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet">
    </head>
<body>
 
<table class="dostab">
    <thead>
      <tr>
        <th>Способ доставки</th>
        <th>Стоимость доставки</th>
        <th>Ориентировочное время доставки</th>
     <th>Информация о доставке</th>
        <th>Оплата</th>
      </tr>
    </thead>
 
<tr>
        <td data-label="Способ доставки">Почта России</td>
        <td data-label="Стоимость доставки">
          Обычная - от 198 руб<br>
          Курьерская - от 300 руб.<br>
          Ускоренная - от 322 руб.</td>
        <td data-label="Ориентировочное время доставки">5-15 дней</td>
     <td data-label="Информация о доставке">Номер трека</td>
        <td data-label="Оплата">Оплата в почтовом отделении</td>
      </tr>
      <tr>
        <td data-label="Способ доставки">ТК КИТ</td>
        <td data-label="Стоимость доставки">
          До 1 кг – 190 руб.<br>
          До 5 кг -  240 руб.<br>
          До 10 кг -  280 руб.<br>
          До 20 кг - от 300 руб.
        </td>
        <td data-label="Ориентировочное время доставки">3-7 дней</td>
     <td data-label="Информация о доставке">Номер трека</td>
        <td data-label="Оплата">Комиссия  - 2.5%</td>
      </tr>
      <tr>
        <td data-label="Способ доставки">ТК Деловые линии</td>
        <td data-label="Стоимость доставки">До 5 кг – от 500 руб.</td>
        <td data-label="Ориентировочное время доставки">3-10 дней</td>
     <td data-label="Информация о доставке">Номер трека</td>
        <td data-label="Оплата">Оплата 100% перед отправкой товара</td>
      </tr>
      <tr>
        <td data-label="Способ доставки">ТК ПЭК</td>
        <td data-label="Стоимость доставки">До 1 кг – от 300 руб.</td>
        <td data-label="Ориентировочное время доставки">3-10 дней</td>
     <td data-label="Информация о доставке">Номер трека</td>
        <td data-label="Оплата">Оплата наличными</td>
      </tr>
      <tr>
        <td data-label="Способ доставки">CDEK</td>
        <td data-label="Стоимость доставки">До 1 кг – от 300 руб.</td>
        <td data-label="Ориентировочное время доставки">2-3 дня</td>
     <td data-label="Информация о доставке">Номер трека</td>
        <td data-label="Оплата">Оплата при получении товара курьеру</td>
      </tr>
     
</table>
</body></html>


CSS:
* {
    box-sizing: border-box;
}
 
.dostab {
  border: 2px solid #a0a0a0;
  width: 100%;
  margin:0;
  padding:0;
  word-wrap: break-word;
}
 
.dostab tr {
  border: 1px solid #a0a0a0;
  text-align: center;
}
 
.dostab th, .dostab td {
  padding: 10px;
  min-width: 160px;
   
}
.dostab td {text-align: left;border: 1px solid #a0a0a0;}
.dostab th {
  background: #eee;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
 
/*при разрешении экрана меньше 760px изменяется таблица*/
@media screen and (max-width: 760px) {
  .dostab {
    border: 0;
  }
  .dostab thead {
    display: none;
  }
  .dostab tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #a0a0a0;
  }
  .dostab td {
    display: block;
    text-align: right;
    font-size: 13px;
     border: 0;
    border-bottom: 1px dotted #a0a0a0;
     width: 100%;
  }
  .dostab td:last-child {
    border-bottom: 0;
  }
  .dostab td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
     display: block;
     padding: 0 8px;
     background: #eee;
  }
}


Оставить комментарий