Лучшая адаптивная таблица с использованием только ванильного CSS для лучшего взаимодействия с пользователем

Обычно таблица, которую мы делаем, не обеспечивает хорошего пользовательского опыта с точки зрения визуализации данных. Итак, в этой статье я поделюсь своим подходом к созданию лучшей адаптивной таблицы для визуализации данных.

Если вы хотите пропустить чтение, вы можете посмотреть видео на YouTube. Ссылка находится в конце статьи.

Шаг 1: Настройка содержимого таблицы в html.

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

Рассмотрим фиктивные данные, в которых у нас есть реквизиты для печати Id-карты сотрудника компании.

 <div class=”caption”>Employee Details</div>
 <div class=”table”>
  <div class=”th”>
   <div class=”td”>Name</div>
   <div class=”td”>DoB</div>
   <div class=”td”>Specialization</div>
   <div class=”td”>Blood Group</div>
   <div class=”td”>Emergency Contact</div>
  </div>
  <div class=”tbody”>
   <div class=”tr”>
    <div class=”td”>John</div>
    <div class=”td”>10/09/1993</div>
    <div class=”td”>UI/UX Designer</div>
    <div class=”td”>O+</div>
    <div class=”td”>98765 43210</div>
   </div>
  <div class=”tr”>
   <div class=”td”>Doe</div>
    <div class=”td”>01/01/2000</div>
    <div class=”td”>Network Architecture</div>
    <div class=”td”>A+</div>
    <div class=”td”>87654 32109</div>
  </div>
  <div class=”tr”>
    <div class=”td”>Jane</div>
    <div class=”td”>09/10/1999</div>
    <div class=”td”>Frontend Developer</div>
    <div class=”td”>B+</div>
    <div class=”td”>76543 21098</div>
  </div>
  <div class=”tr”>
    <div class=”td”>Satoshi</div>
    <div class=”td”>20/08/1999</div>
    <div class=”td”>Backend Developer</div>
    <div class=”td”>AB+</div>
   <div class=”td”>65432 10987</div>
  </div>
  <div class=”tr”>
    <div class=”td”>Nakamoto</div>
    <div class=”td”>14/10/1983</div>
    <div class=”td”>Fullstack Developer</div>
    <div class=”td”>O-</div>
    <div class=”td”>54321 09876</div>
    </div>
  </div>
 </div>

Шаг 2: Стилизация классов для табличного вида

Давайте создадим таблицу полос зебры и назначим заголовок разного цвета, а также назначим одинаковую ширину каждому столбцу.

 body {
  font-family: arial;
 }
 .caption {
  font-size: 30px;
  font-weight: bold;
  margin: 25px;
  text-align: center;
 }
 .tr {
  display: flex;
 }
 .th {
  display: flex;
  background: mediumblue;
  color: white;
 }
 .td {
  width: 20%;
  border: 1px solid #777;
  padding: 10px;
 }
 .tr:nth-of-type(even) {
  background: #efefef;
 }

Теперь у нас есть основная таблица. Вы можете изменить размер экрана и посмотреть, насколько плох пользовательский интерфейс для маленьких экранов.

Давайте сделаем его лучше и для маленьких экранов.

Шаг 3: Скрытие заголовка и изменение вида таблицы

Мы изменим представление на один столбец и несколько строк для каждого набора данных. Отсюда мы будем писать стили для @media (max-width: 600px), (max-device-width: 600px).

.th {
  display: none;
 }
.tr {
  display: block;
  margin-bottom: 25px;
  background: transparent !important;
 }
.td {
  background: #f0f0f0;
  display: flex;
  width: 90%;
  margin: auto;
 }

Шаг 4. Добавление меток заголовка и данных

Мы будем рассматривать первую строку каждого набора как заголовок и раскрашивать ее по-разному для лучшей визуализации.

 .td:nth-of-type(1) {
   content: “Name:”;
   background: mediumblue;
   color: white;
   font-weight: bold;
 }
 .td:before {
   font-weight: bold;
   display: block;
   width: 50%;
 }
 .td:nth-of-type(2):before {
   content: “DoB:”;
 }
 .td:nth-of-type(3):before {
  content: “Specialization:”;
 }
 .td:nth-of-type(4):before {
   content: “Blood Group:”;
 }
 .td:nth-of-type(5):before {
   content: “Emergency Contact:”;
 }

Шаг 5: Исправление размера шрифта и отступов для всех устройств.

 @media (max-device-width: 600px) {
  .table {
   font-size: 2rem;
  }
  .td {
   padding: 20px;
  }
 }

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

Пожалуйста, не стесняйтесь оставлять свое мнение или любые полезные советы.

Спасибо, что прочитали. Чтобы получать больше обновлений и подключаться к другим социальным сетям, нажмите на ссылку: Designing Coder