• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Простая адаптивная таблица с помощью CSS (Как сделать адаптивные таблицы при помощи стилей CSS)
Простая адаптивная таблица с помощью CSS
Kosten
Дата: Среда, 06.06.2018, 23:02 | Сообщение 1
Администраторы
Сообщений:17616
Награды: 55


Вашему вниманию адаптивная под все мобильные аппараты идет таблица, которая создана на чистом html и css. Он идет в простом формате, где все отлично отображается, плюс для пользователя и гостей отлично будет смотреться в плане разнообразия и вероятности в том, что корректно выводит знаки. Все по стандарту, где общая ширина таблицы, безусловно задана в пикселях, где идет стилистика для того, чтоб ее отредактировать под свой дизайн. Один из моих любимых мотивов в веб дизайне - это то, как таблицы часто не оптимизируются для работы без использования рабочего стола.

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

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

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

В реальном размере:



Это уже с мобильного гаджета:



HTML

Код
<table>
  <caption>ZorNet.Ru: Создание сайта uCoz</caption>
  <thead>
    <tr>
      <th scope="col">ZORNET.RU</th>
      <th scope="col">СКРИПТЫ</th>
      <th scope="col">ШАБЛОНЫ</th>
      <th scope="col">ДИЗАЙН</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Надпись</td>
      <td data-label="Due Date">Здесь дата</td>
      <td data-label="Amount">$4,564</td>
      <td data-label="Period">11/12/1987 - 12/25/1974</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Запрос под номером</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$5,776</td>
      <td data-label="Period">11/28/1865 - 12/31/1963</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Скрипты сайта</td>
      <td data-label="Due Date">Дата</td>
      <td data-label="Amount">Цена</td>
      <td data-label="Period">Дата плюс с выхода</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Запрос под номером 3</td>
      <td data-label="Due Date">Здесь дата</td>
      <td data-label="Amount">$745</td>
      <td data-label="Period">12/25/1983 - год-месяц</td>
    </tr>
  </tbody>
</table>


CSS

Код
table {
  border: 1px solid #c7c2c2;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f9f4f4;
  border: 1px solid #d8d2d2;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #d6d0d0;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #d6d0d0;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}


Демонстрация

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

Эта коллекция HTML и CSS, что будет работать и выводить корректно на всех браузерах Более сложные таблицы, большие таблицы, таблицы с различными типами контента.

Надеюсь, здесь достаточно информации и контекста, из которых вы можете создать собственное решение, соответствующее вашим или вашим потребностям проекта.
Прикрепления: 4193067.png(23.5 Kb) · 5744734.png(19.7 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Простая адаптивная таблица с помощью CSS (Как сделать адаптивные таблицы при помощи стилей CSS)
  • Страница 1 из 1
  • 1
Поиск: