Создание горизонтального интерактивного отчета для отображения недельных данных

Я создаю отчет для отображения еженедельных приемов пищи, как показано ниже в таблице

Week 1                  
Sunday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Monday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Tuesday  Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
WednesdayMeal 1 Meal 2  Meal 3  Meal 4  Meal 5
Thursday Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Friday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Saturday Meal 1 Meal 2  Meal 3  Meal 4  Meal 5

Week 2                  
Sunday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Monday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Tuesday  Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
WednesdayMeal 1 Meal 2  Meal 3  Meal 4  Meal 5
Thursday Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Friday   Meal 1 Meal 2  Meal 3  Meal 4  Meal 5
Saturday Meal 1 Meal 2  Meal 3  Meal 4  Meal 5

Я хочу, чтобы количество недель не превышало 2 недель, и есть 7 дней, а в пасхальном периоде - 3 4 5 или 6 или любое количество приемов пищи в день, которые я хочу отображать по вертикали в интерактивном или классическом отчете по дням. графический дисплей, см. ссылку ниже

https://drive.google.com/open?id=1_8WtTgYjgC8ySiNZWNgzouIlUE6zgj2L

Источник

1 ответ

Решение

Я сделал это, используя htp.p Просто используя Media Query в CSS

<!DOCTYPE html>
<html>
<head>
<style>
.body{
  margin: 0px;
  padding: 0px;
  background: #ccc;
}
.menu{
  display: flex;
  flex-wrap: wrap;
  padding:0px;
}
.menu li{
    display: flex;
    flex-direction: column;
    width:  0vw;
    height: 100vh;
    justify-content: left;
    align-items: center;
    background: #fff;
    margin: 1px auto;
}
.menu li i{
  font-size:24px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  border:1px solid #ccc;
  border-radius:50%;
  margin-bottom:12px;
  cursor:pointer;
} 
.div {

border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: center;
  border-collapse: collapse;

}


@media only screen and (max-width: 1250px) {

    .menu li {

    width: 100px !important;
    height: 100px !important;


}

}
</style>
</head>
<body>

<h3 class="list-heading">Week</h3>
<div class="div">
<h3 class="list-heading">Day</h3>
<div class="div">
<ul class="menu">

    <li><i class="fa fa-plus"></i><span>6</span></li><br>
    <li><i class="fa fa-plus"></i><span>6</span></li><br>
    <li><i class="fa fa-plus"></i><span>6</span></li>
    <li><i class="fa fa-plus"></i><span>6</span></li>
    <li><i class="fa fa-plus"></i><span>6</span></li>
    <li><i class="fa fa-plus"></i><span>6</span></li>

</ul>
</div>



</body>
</html>
Источник
Другие вопросы по тегам