создание горизонтального интерактивного отчета для отображения недельных данных - PullRequest
Новая
       6

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

0 голосов
/ 17 апреля 2019

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

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 Ответ

0 голосов
/ 19 апреля 2019

Я сделал это, используя 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>
...