возможно ли создать таблицу на grid ?
есть див, в который скрипт вставляет много маленьких дивов, количество строк и рядов не всегда постоянная, меняется через элементы формы...
есть два варианта сетки, 1.) 7 строк и динамически меняется количество столбцов 2.) 7 столбов и динамически меняется количество строк возможно ли на grid в первом варианте создать таблицу с первым столбцом в 20% а остальным столбцам задать одинаковую ширину, и при этом задать всем строкам одинаковую высоту, а во втором варианте создать таблицу с первой строкой в 20% от высоты, остальным строкам задать одинаковую высоту, и при этом задать одинаковую ширину столбов? как это лучше реализовать? или подскажите как изменить js-код, чтобы генерировалась простая таблица обёрнутая в див... вот полный код страницы... <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>calendar-rotate</title> <style type="text/css"> #calendar_rotate { border: 1px solid hsl(0,0%,66%); padding: 5px; display: inline-block; width: 373px; } #navigation_panel { border: 1px solid hsl(0,0%,66%); padding: 5px 10px; margin: 0 0 5px 0; display: inline-block; white-space: nowrap; } .month { border: 1px solid hsl(0,0%,66%); width: 367px; height: 367px; padding: 2px; } .month, .month.vert .week_day, .day { display: inline-block; } .month.vert .day { display: block; } .day { border: 1px solid hsl(0,0%,66%); width: 30px; line-height: 30px; text-align: center; padding: 3.5px; margin: 2px; background-color: hsl(210,100%,90%); color: hsl(210,100%,50%); } .day:nth-child(7n + 6), .day:nth-child(7n + 7) { background-color: hsl(348,100%,90%); color: hsl(348,100%,50%); } input { border: 1px solid hsl(0,0%,66%); width: 54px; display: inline-block; text-align: center; } </style> </head> <body> <div id="calendar_rotate"> <div id="navigation_panel"> <select id="month_select"></select> <input id="year_input" type="number" size="4" value=""/> <button id="month_rotate">➙</button> </div> <div class="month vert"></div> <script> var calendar = { update: function(year, month) { this.days.length = 7; var stepDay = new Date(year, month, 1); stepDay.setDate(stepDay.getDate() + 0 - ((stepDay.getDay() + 6) % 7)); var lastDay = new Date(year, month + 1, 0); lastDay.setDate(lastDay.getDate() + 6 - ((lastDay.getDay() + 6) % 7)); while (stepDay <= lastDay) { this.days.push(stepDay.getDate()); stepDay.setHours(24); } }, render: function() { var html = ''; for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) { if (j == 0) html += '<div class="week_day">'; html += '<div class="day">' + this.days[i] + '</div>'; if (j == 6) html += '</div>'; } this.element.innerHTML = html; }, toggle: function() { this.element.classList.toggle('vert'); }, }; var today = new Date(), thisYear = today.getFullYear(), thisMonth = today.getMonth(); calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; selector = document.getElementById('month_select'); month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; for (let i = 0; i < month_list.length; i++){ selector.options[i] = new Option(month_list[i], i); } selector.selectedIndex = thisMonth; selector.addEventListener('change', load); document.getElementById('year_input').addEventListener('change', load); calendar.element = document.querySelector('.month'); document.getElementById('month_rotate').addEventListener('click', function() { calendar.toggle(); }); function load(){ let year = document.getElementById('year_input').value; let month = selector.selectedIndex; calendar.update(year, month); calendar.render(); } document.addEventListener("DOMContentLoaded", ()=>{ document.getElementById('year_input').value = thisYear; load(); }); </script> </div> </body> </html> |
Часовой пояс GMT +3, время: 16:07. |