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

Question

我正在创建一个报告来显示每周的一日三餐，如下所示 table

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 或任意数量的饭菜我想在交互式报告或经典 Report.Also 中按周垂直显示天数如需更多图形显示，请参见下方 link

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

Answer 1

我已经使用 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>

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

creating horizontal interactive report to display week wise data

oracle

oracle-apex-18.2