• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Адаптивные сетки таблицы с помощью CSS (Создание отзывчивой сетки таблиц с помощью CSS)
Адаптивные сетки таблицы с помощью CSS
Kosten
Дата: Пятница, 01.06.2018, 22:28 | Сообщение 1
Администраторы
Сообщений:18272
Награды: 55


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

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

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



Существует восемь шагов для создания вашей сетки.

Вот краткие этапы:

1. Выберите спецификацию для создания сетки с помощью;
2. Создать контейнер сетки;
3. Вычислить ширину столбца;
4. Определите положения желобов;
5. Создание сетки отладки;
6. Сделать варианты макета;
7. Сделайте ваши макеты отзывчивыми;

Большинство из этих семб шагов относительно просты, что поможет для создание в оригинальном виде.

HTML

Код
<div class="zornet_ru_gsavetuns">
  <div class="three-col-grid">
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
    <div class="kigastunqsa">ZorNet.Ru: Создание сайта</div>
  </div>
</div>


SCSS

Код
@mixin clearfix {
  &:after {
    display: table;
    clear: both;
    content:'';
  }
}

body {
  margin-top: 3rem;
}

.zornet_ru_gsavetuns {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

.kigastunqsa {
  width: calc((100% - 24px * 3) / 3);
  margin-top: 23px;
  margin-left: 5px;
  margin-right: 7px;
  float: left;
}

.kigastunqsa {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 79px;
    text-align: center;
    background: #1587b1;
    border: 3px solid #cdcfd2;
    border-radius: 5px;
    color: #f3f1f1;
    font-weight: bold;
    text-shadow: 0 1px 0 #4c4949;
}


Используете ли вы столбцы равной ширины или неравномерной ширины.

Демонстрация
Прикрепления: 2366255.png(21.1 Kb)
Страна: (RU)
Kosten
Дата: Среда, 06.06.2018, 20:03 | Сообщение 2
Администраторы
Сообщений:18272
Награды: 55


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

Узнайте как создать таблицу с полосой зебры с CSS. Базовая таблица имеет легкую прокладку и только горизонтальные разделители.

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

В этом примере мы предположим, что у вас есть простая таблица с несколькими столбцами (2-4) и вы хотите поместить всю таблицу по ширине экрана. Чтобы сделать это, все, что нам нужно сделать, это просто применить ширину: 100% к тегу таблицы.



HTML

Код
<h1><a href="http://zornet.ru/" target="_blank">ZorNet.Ru: Создание сайта uCoz<a/></h1>
<table>
    <thead>
    <tr>
  <th>ZORNET.RU #1</th>
  <th>ZORNET.RU #2</th>
  <th>ZORNET.RU #3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
  <td>Скрипты</td>
  <td>Шаблоны</td>
  <td>Дизайн</td>
    </tr>
    <tr>
  <td>Скрипты</td>
  <td>Шаблоны</td>
  <td>Дизайн</td>
    </tr>
    <tr>
  <td>Скрипты</td>
  <td>Шаблоны</td>
  <td>Дизайн</td>
    </tr>
   <tr>
  <td>Скрипты</td>
  <td>Шаблоны</td>
  <td>Дизайн</td>
    </tr>
    </tbody>
</table>


CSS

Код
table {
  width: 100%;
  border-collapse: collapse;
  background: #34495e;
  color: #f3f3f3;
}

td, th {
  padding: 8px;
  text-align: left;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #16a085;
}

th {
  background: #2c3e50;
  font-weight: bold;
}

h1 a {
  text-decoration: none;
  color: #fff;
}


Как вы можете видеть, создание гибкой таблицы не очень сложно, если у вас небольшое количество столбцов в таблице.
Прикрепления: 1366859.png(18.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Адаптивные сетки таблицы с помощью CSS (Создание отзывчивой сетки таблиц с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: