创建水平交互式报告以显示周智能数据

问题描述 投票:0回答:1

我正在创建一份报告,显示每周明智的膳食,如下表所示

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

oracle oracle-apex-18.2
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>

推荐问答