如何很好地显示来自数据库

Question

我必须按照以下格式显示数据库中的数据，我的数据是可变的，它可以包含一到五个变量。

如何使用html，css显示它们并保持良好状态？ 我尝试过使用div和span但它看起来不太好（图像编号3表示我使用以下代码）

＆＃13;

＆＃13;

<div style="margin: 5% 0 0 0" id="part">
  <div style="width: 55%; margin-top: 3%; display: inline-block; vertical-align: top">
    <p style="
                transform: rotate(-90deg);
                width: 175px;
                height: 50px;
                float: left;
                background: gray;
                color: #fff;
                text-align: center;
                padding-left: 10px;
                padding-top: 15px;
                margin: 40px 0 0 0">List1: {{ en.form.nbTotalCon }}</p>
    <p>
      <span style="display: block;margin-left: 98px; margin-bottom: 3px;background-color:darkgray  "> {{ en.form.part1 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px;">  {{ en.form.part2 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px;background-color:darkgray ">  {{ en.form.part3 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px; "> {{ en.form.part4 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray ">  {{ en.form.part5 }}</span>
    </p>
  </div>

  <div style=" width: 40%;margin-top: 3%; display: inline-block;vertical-align: top ">
    <p style="
                transform: rotate(-90deg);
                width: 160px;
                height: 50px;
                float: left;
                background: gray;
                color: #fff;
                text-align: center;
                padding-left: 10px;
                padding-top: 15px;
                margin: 40px 0 0 0">
      Projects:{{ en.form.nbTotalProj }} </p>
    <p>
      <span style="display: block;margin-left: 100px;background-color:darkgray"> {{ en.form.nomProj1 }} </span>
      <span style="display: block;margin-left: 100px;">  {{ en.form.nomProj2 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray">  {{ en.form.nomProj3 }} </span>
      <span style="display: block;margin-left: 100px;">  {{ en.form.nomProj4 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray">  {{ en.form.nomProje5 }} </span>
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是我使用上面的代码：

Answer 1

这是一个尝试

$(document).ready(function(){

var cont = $(".container");

cont.find(".header").width(cont.height() +(cont.find("td > table td").length * 10));
cont.find("td > table").css({"margin-left": "-" +(cont.find(".header").height() ) +"px" }); /// need more work here 
});

.header{

transform: rotate(-90deg);
width: 149%;
height: 36%;
display:inline-block;
background: gray;
color: #fff;
text-align: center;
padding-left: 0px;
padding-top: 15px;
margin: 0px 0 0 0;
position:relative;
top:0;
left:-30px;
}

table{
min-width:300px;
height:100%;

}

td table td{
border:1px solid #CCC;
padding:5px;
}

.container{
height:100px;
}

td >table{
position:relative;
left:-10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<table>
<tr>
<td><div class='header'> this is header </div></td>
<td>
<table>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 2</td>
</tr>
<tr>
<td> 2</td>
</tr>

<tr>
<td> 2</td>
</tr>

<tr>
<td> 2</td>
</tr>




</table>
</td>
</tr>

</table>

</div>