垂直图表，CSS的div和MySQL

Question

我有一个表：

ID  | title | start_line | line_height | studio 
    -------- |----------|------------|-------------|------- 
    1  | Title 1 |  2  |  7  | 1 
    1  | Title 2 |  15  |  4  | 1 
    1  | Title 3 |  6  |  5  | 2 
    1  | Title 4 |  12  |  5  | 3 

，我想用css来复制它像

任何建议或方向？ （我想要避免任何JavaScript）

Answer 1

你可以用HTML嵌入CSS： 一个主div包含4列（行内块div，固定100％高度）。 每个动态列都填充了一个“legend”div和一些“event”div。每个具有“位置：相对”属性（通过类），“高度”和“顶部”属性都以内联方式给出。结果应该是这样的：生成

<div class="table"> 
    <div class="column"> 
    <div class="legend" style="top:0%;height:4.76%">Studio 1</div> 
    <div class="event" style="top:16.66%;height:32.5%">Title X/Height Y</div> 
    .... 
    </div> 
</div> 

这从PHP不应该是一个真正的问题：

echo '<div class="event" style="top:'.(100*$res["start_line"]/21). 
'%;height:'.(100*$res["line_height"]/21).'%">Title X/Height Y</div>'; 

同为第一列：

for($i=0;i<22;$i++) { 
echo '<div class="legend" style="top:'.(100*$i/21).'%;height:'.(100/21).'%">'.$i.'</div>'; 
} 

最后一步是添加每列的网格。你可以找到纯粹的CSS技巧来做到这一点（可能不可靠），或者在每一列上使用一个拉伸的背景图像。