垂直圖表，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技巧來做到這一點（可能不可靠），或者在每一列上使用一個拉伸的背景圖像。