0

我正在创建一个报告来显示每周一天的明智膳食，如下表所示

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

4

1 回答 1

0

我已经htp.p在 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>
于 2019-04-18T22:02:22.010 回答