ПО, ЭВМ и АСУ из Таможенного Союза

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » ПО, ЭВМ и АСУ из Таможенного Союза » web-разработка » Как сделать таблицу на гридах

Как сделать таблицу на гридах

Страница: 1

Сообщений 1 страница 15 из 15

1

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16

Таблица на гридах:

Вариант 1 кода таблицы
Код:
[html]
<style>
#container {
  display: grid;
  grid-gap: 2px;
  grid: repeat(3, 1fr) / auto-flow;
}

#container > div {
  padding: 4px;
  text-align: center;
  background-color: #cee;
}
main{display: inline-grid; padding: 2px; background-color: #666;}
</style>
<main>
<div id="container">
  <div>№ п/п</div>
  <div></div><div></div>
  <div>Назначение элемента</div>
  <div></div><div></div>
  <div>Оригинал</div>
  <div></div><div></div>
  <div>Рекомендуемый аналог</div>
  <div></div><div></div>
  <div>Правило</div>
  <div></div><div></div>
  <div>Пояснение к правилу</div>
  <div></div><div></div>
</div>
</main>
[/html]

Результат:
[html]
<style>
#container {
  display: grid;
  grid-gap: 2px;
  grid: repeat(3, 1fr) / auto-flow;
}

#container > div {
  padding: 4px;
  text-align: center;
  background-color: #cee;
}
main{display: inline-grid; padding: 2px; background-color: #666;}
</style>
<main>
<div id="container">
  <div>№ п/п</div>
  <div></div><div></div>
  <div>Назначение элемента</div>
  <div></div><div></div>
  <div>Оригинал</div>
  <div></div><div></div>
  <div>Рекомендуемый аналог</div>
  <div></div><div></div>
  <div>Правило</div>
  <div></div><div></div>
  <div>Пояснение к правилу</div>
  <div></div><div></div>
</div>
</main>
[/html]

Вариант 2 кода таблицы
Код:
[html]
<style>
#container 
  {padding: 2px;  transform: scale(0.8);
    display: inline-grid;
    grid-gap: 2px;
    grid-template-columns: auto auto auto auto auto auto;
    background-color: #666;
  }

#container > div 
  {padding: 4px;
    text-align: center;
    background-color: #cee;
  }
</style>

<div id="container">
  <div>№ п/п</div><div>Назначение элемента</div><div>Оригинал</div>
  <div>Рекомендуемый аналог</div><div>Правило</div><div>Пояснение к правилу</div>
  <div>1</div>
  <div><svg viewBox="0 0 100 200" width="100" height="200">
    <text x="5" y="20" width="40" height="20">Микроид</text>
  <rect id="нету" x="5" y="50" width="80" height="40" fill="#c52" />
  </svg></div>
  <div></div>
  <div><svg viewBox="0 0 200 200" width="200" height="200">
    <symbol id="penta" width="200" height="200" viewBox="0 0 200 200" >
        <polygon id="star" points="100,0 40,180 195,70 5,70 160,180"
        style="cursor: pointer; fill-rule: nonzero; fill: #aabb00; stroke: none; stroke-width: 1px;"/>
    </symbol>
  <use xlink:href="#penta" x="0" y="0" width="200" height="200"></use>
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="0 0 2000 2000" dur="0.8s"
          begin="нету.click" fill="freeze" />
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="есть.click" fill="freeze" />
</svg></div>
  <div></div>
  <div>Минимизация<br>элементов</div>
  <div>2</div>
  <div><svg viewBox="0 0 100 200" width="100" height="200">
       <text x="5" y="20" width="40" height="20">Мaкроид</text>
       <rect id="есть" x="5" y="50" width="80" height="40" fill="#5c2" />
    </svg></div>
  <div></div><div><svg viewBox="0 0 200 200" width="200" height="200">
    <symbol id="penta" width="200" height="200" viewBox="0 0 200 200" >
        <polygon id="star" points="100,0 40,180 195,70 5,70 160,180"
        style="cursor: pointer; fill-rule: nonzero; fill: #aabb00; stroke: none; stroke-width: 1px;"/>
    </symbol>
  
  <use xlink:href="#penta" x="0" y="0" width="200" height="200"></use>
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="0 0 2000 2000" dur="0.8s"
          begin="нету.click" fill="freeze" />
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="есть.click" fill="freeze" />
</svg></div>
  <div></div>
  <div>Максимизация<br>элементов</div>
</div>
[/html]

Результат:[html]
<style>
#container
  {display: inline-grid;
    padding: 2px; 
    transform: scale(0.8);
    grid-gap: 2px;
    grid-template-columns: auto auto auto auto auto auto;
    background-color: #666;
  }

#container > div
  {padding: 4px;
    text-align: center;
    background-color: #cee;
  }
</style>

<div id="container">
  <div>№ п/п</div><div>Назначение элемента</div><div>Оригинал</div>
  <div>Рекомендуемый аналог</div><div>Правило</div><div>Пояснение к правилу</div>
  <div>1</div>
  <div><svg viewBox="0 0 100 200" width="100" height="200">
    <text x="5" y="20" width="40" height="20">Микроид</text>
  <rect id="нету" x="5" y="50" width="80" height="40" fill="#c52" />
  </svg></div>
  <div></div>
  <div><svg viewBox="0 0 200 200" width="200" height="200">
    <symbol id="penta" width="200" height="200" viewBox="0 0 200 200" >
        <polygon id="star" points="100,0 40,180 195,70 5,70 160,180"
        style="cursor: pointer; fill-rule: nonzero; fill: #aabb00; stroke: none; stroke-width: 1px;"/>
    </symbol>
  <use xlink:href="#penta" x="0" y="0" width="200" height="200"></use>
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="0 0 2000 2000" dur="0.8s"
          begin="нету.click" fill="freeze" />
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="есть.click" fill="freeze" />
</svg></div>
  <div></div>
  <div>Минимизация<br>элементов</div>
  <div>2</div>
  <div><svg viewBox="0 0 100 200" width="100" height="200">
       <text x="5" y="20" width="40" height="20">Мaкроид</text>
       <rect id="есть" x="5" y="50" width="80" height="40" fill="#5c2" />
    </svg></div>
  <div></div><div><svg viewBox="0 0 200 200" width="200" height="200">
    <symbol id="penta" width="200" height="200" viewBox="0 0 200 200" >
        <polygon id="star" points="100,0 40,180 195,70 5,70 160,180"
        style="cursor: pointer; fill-rule: nonzero; fill: #aabb00; stroke: none; stroke-width: 1px;"/>
    </symbol>
 
  <use xlink:href="#penta" x="0" y="0" width="200" height="200"></use>
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="0 0 2000 2000" dur="0.8s"
          begin="нету.click" fill="freeze" />
  <animate xlink:href="#penta" attributeType="XML" attributeName="viewBox"
          from="0 0 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="есть.click" fill="freeze" />
</svg></div>
  <div></div>
  <div>Максимизация<br>элементов</div>
</div>
[/html]

0

2

  • Автор: Лис [О]
  • Сочувствующий
  • Лис [О]
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 1030
  • Уважение: [+0/-3]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 дня 23 часа
  • Последний визит:
    2019-07-17 09:23:07

У меня не видны два правых столбца, они не помещаются, не влезают.

http://sh.uploads.ru/t/rFeSx.gif

Отредактировано Лис (2018-09-08 18:27:59)

0

3

  • Автор: utkin
  • Созидатель языка Валентина-2
  • Зарегистрирован: 2017-07-27
  • Приглашений: 0
  • Сообщений: 1105
  • Уважение: [+2/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    11 дней 18 часов
  • Последний визит:
    2019-07-19 07:12:54

В каком браузере?
Возможно, где-то в #container нужно настроить ширину столбцов с помощью grid-template-columns...

Отредактировано utkin (2018-09-08 20:20:31)

0

4

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16
Лис написал(а):

У меня не видны два правых столбца, они не помещаются, не влезают.

- Исправил, теперь таблица резиновая, там нужно было указать auto-flow; без значения по ширине... (скъюз-ми)

0

5

  • Автор: Лис [О]
  • Сочувствующий
  • Лис [О]
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 1030
  • Уважение: [+0/-3]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 дня 23 часа
  • Последний визит:
    2019-07-17 09:23:07
Сандро написал(а):

- Исправил, теперь таблица резиновая

Таблица всё равно не прокручивается по горизонтали.
Это означает, что ей нельзя будет пользоваться, когда внутрь станет набит текст (она же будет резиновая и растянется).

http://s3.uploads.ru/t/HRZ2x.gif

На данном изображении не влезло слово "рекоменду".

Хорошо, когда у Вас ширина поверхности 5760 пикселов (три монитора по 1920). А остальным что делать?

Отредактировано Лис (2018-09-08 22:56:50)

0

6

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16
Лис написал(а):

А остальным что делать?

А остальным - ctrl + или ctrl - ... По-моему, сейчас любой браузер поддерживает масштабирование страниц.

[html]Оригинал таблицы лежит в <a class="menu-href" href="https://codepen.io/warsan/pen/KxyeOL">этой песочнице:</a> [/html] Там есть возможность сужать и замерять размеры.
За счёт авто-переноса слов внутри ячеек размер этой таблицы способен сжаться до ширины порядка 500 пикселей.  Во время сжатия минимальная ширина каждой ячейки зависит от длины самого длинного слова в ней и не зависит от количества слов, её наполняющих.
Согласно предоставленного рисунка - скриншот таблицы сделан на мониторе с шириной менее 300 пикселей. Это даже у́же, чем ширина обычного телефона.
Самый же маленький из настольных мониторов, кои мне когда-либо пришлось видеть и чинить - имели размер, пригодный для установки разрешения 640х480 пикселей, т. е. вдвое шире предоставленного скриншота.
Кроме того, встаёт вопрос: как же тогда влезла в экран вот эта недавняя картинка, (???) когда она будет куда ширше нашей таблицы, а тем более шире предоставленного скрина.
Песочницу, где можно не только проверить, но и изменить любое из качеств таблицы - на всякий случай прилагаю сюда же:

Песочница таблицы

[html]
<iframe height='501' scrolling='no' title='Таблица ' src='//codepen.io/warsan/embed/KxyeOL/?height=501&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/warsan/pen/KxyeOL/'>Таблица </a> by Сандро (<a href='https://codepen.io/warsan'>@warsan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
[/html]

- И да, можно применить к ячейкам и "grid-template-columns:" с процентами, и ещё много чего, что и описано в вышеприведённой ссылочке Таблица на гридах:.
В стили добавлена строчка body{transform: scale(0.8);} Кому надо - делайте scale(0.4); или пропишите скрипт масштабирования...

0

7

  • Автор: utkin
  • Созидатель языка Валентина-2
  • Зарегистрирован: 2017-07-27
  • Приглашений: 0
  • Сообщений: 1105
  • Уважение: [+2/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    11 дней 18 часов
  • Последний визит:
    2019-07-19 07:12:54

grid-template-columns позволяет задать ширину колонок в % от размера таблицы. А если она резиновая, то станет по ширине рабочей области и колонки будут перестраиваться относительно общей ширины таблицы, не увеличивая ее. В теории  :crazyfun: ...

Отредактировано utkin (2018-09-09 07:54:08)

0

8

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16
utkin написал(а):

grid-template-columns позволяет задать ширину колонок в % от размера таблицы.

- Да, ещё и авто-ширину включать: grid-template-columns: auto auto auto auto auto auto;, что я и сделал во втором варианте. Даже строку body{transform: scale(0.8);} добавил для "вящаго" счастья...
Пробовал уже и окно браузера уменьшать в-нет, и масштабировать сам браузер, - всё работает, как часы; горизонтальная и вертикальная прокрутки у браузера тоже появляются в нужный момент.

Ещё о гридах

[html]<iframe width="100%" height="800" src="https://codepen.io/warsan/pen/XPEYox" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>[/html]

С каждым шагом таблица претерпевает изменения...

0

9

  • Автор: utkin
  • Созидатель языка Валентина-2
  • Зарегистрирован: 2017-07-27
  • Приглашений: 0
  • Сообщений: 1105
  • Уважение: [+2/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    11 дней 18 часов
  • Последний визит:
    2019-07-19 07:12:54

Ну, ждем от  Лиса название браузера.

0

10

  • Автор: Лис [О]
  • Сочувствующий
  • Лис [О]
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 1030
  • Уважение: [+0/-3]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 дня 23 часа
  • Последний визит:
    2019-07-17 09:23:07
utkin написал(а):

Ну, ждем от  Лиса название браузера.

Если немного подумать, никаких вариантов быть не может:
[html]<img src="data:image/jpeg;base64,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" />[/html]

0

11

  • Автор: utkin
  • Созидатель языка Валентина-2
  • Зарегистрирован: 2017-07-27
  • Приглашений: 0
  • Сообщений: 1105
  • Уважение: [+2/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    11 дней 18 часов
  • Последний визит:
    2019-07-19 07:12:54

http://sd.uploads.ru/qK2X6.jpg
Усё показывает норм. Наверно старенький у Вас стоит. И вообще странно Мозилла (вместе с Оперой и Мелкософтом) состоят там в обществе любителей пихать нововведения в браузеры в строгом соответствии со стандартами. У них картель с аштэмельщиками. Именно они определяют какие фишки из стандартов HTML и CSS будут работать в браузерах, а какие нет. Причем ровно так как описано в спецификациях (а не так как удобно пользователю, как это делает Хром). И если в мозилле что-то будет показывать криво, то ровно потому что в стандарте так написано.

ЗЫ. Давно не пользовался Мозилкой и после обновлений 10-ки, он перестал открываться. Пришлось переустановить.

Отредактировано utkin (2018-09-12 10:21:37)

0

12

  • Автор: Лис [О]
  • Сочувствующий
  • Лис [О]
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 1030
  • Уважение: [+0/-3]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 дня 23 часа
  • Последний визит:
    2019-07-17 09:23:07

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

0

13

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16
Лис написал(а):

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

- Уже попробовал. (в последнем варианте, под спойлером "Ещё о гридах")))
- Ещё раз изменил. Кто желает - может посмотреть там же...

0

14

  • Автор: Лис [О]
  • Сочувствующий
  • Лис [О]
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 1030
  • Уважение: [+0/-3]
  • Позитив: [+1/-0]
  • Провел на форуме:
    4 дня 23 часа
  • Последний визит:
    2019-07-17 09:23:07
Сандро написал(а):

в последнем варианте, под спойлером "Ещё о гридах"

http://s8.uploads.ru/t/yphEW.gif

У меня это не выглядит как приличная таблица, а выглядит как два наложенных друг на друга текста.

Отредактировано Лис (2018-09-13 01:51:46)

0

15

  • Автор: Сандро
  • Участник
  • Сандро
  • Зарегистрирован: 2017-03-25
  • Приглашений: 0
  • Сообщений: 241
  • Уважение: [+5/-0]
  • Позитив: [+4/-0]
  • Провел на форуме:
    15 дней 5 часов
  • Последний визит:
    2022-11-21 00:07:16
Лис написал(а):

У меня это не выглядит как приличная таблица, а выглядит как два наложенных друг на друга текста.

- Хе, зато при наведении курсора на "туда, где читаю", - всё становится "весьма и весьма"... )))
- А что будет, ежли мы вместе подумаем, "как, чтобы",.. (?) - Вслух, а?
Например, спрячем основной текст каждой ячейки с помощью visibility: hidden; или display: none; или opacity: 0;., а при наведении мышки на "шильдик-заголовок-преамбулу" - покажем.
И это будет не таблица уже, а целая картотека ажно, ведь преамбулы будут занимать минимум места в ячейке, а значит и таблица станет гораздо у́же, а?
Можно и конкурс организовать на тему изготовления самой красивой и вместительной таблицы-картотеки. Чья таблица больше по нраву - тому кликаем плюсик в правом углу...

0

Страница: 1

Вы здесь » ПО, ЭВМ и АСУ из Таможенного Союза » web-разработка » Как сделать таблицу на гридах