我正在创建一份报告，显示每周明智的膳食，如下表所示
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
我这样做使用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>