タイムテーブルをHTMLテーブルに表示

Question

私はこのテーブルを持っています。このテーブルにはリクエストの現在のステータスが表示されます。サンプルテーブルは

表は、唯一の問題は、ステータスでそのタイムラインを表示する方法を非常に簡単ですHTMLに以下のようになります。以下のようなタイムラインや類似のものを表示する場合は、同じ目的のグリッドを使用しても構いません。

進歩で承認新タイムラインなど

Answer 1

私は、連続的なタイムラインのため:beforeと:afterを使用することをお勧め。

我々はそのための2つのクラスがあります：

table { 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    border: 1px solid #ddd; 
 
} 
 
.timeline { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
    width: 50px; 
 
    position: relative; 
 
} 
 
.timeline span { 
 
    width: 14px; 
 
    height: 14px; 
 
    border-radius: 50%; 
 
    background-color: gray; 
 
    display: none; 
 
} 
 
.timeline.has-left:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: -1px; 
 
    width: 50%; 
 
    height: 3px; 
 
    top: 12px; 
 
    background-color: gray; 
 
} 
 
.timeline.has-right:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: -1px; 
 
    width: 50%; 
 
    height: 3px; 
 
    top: 12px; 
 
    background-color: gray; 
 
} 
 
.timeline.has-left span, 
 
.timeline.has-right span { 
 
    display: inline-block; 
 
}

<table> 
 

 
    <tr> 
 
    <td class="timeline has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left"><span></span> 
 
    </td> 
 
    <td class="timeline"><span></span> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="timeline has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left"><span></span> 
 
    </td> 
 
    <td class="timeline has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left"><span></span> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="timeline"><span></span> 
 
    </td> 
 
    <td class="timeline has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left has-right"><span></span> 
 
    </td> 
 
    <td class="timeline has-left"><span></span> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

私のアプローチ（テーブルを使用してを余儀なく場合）、いくつかのCSS :afterセレクタを適用するには、次のようになります。.has-leftと.has-rightは、タイムラインの表示を定義します。

HTML

<table width="50%" cellpadding="0" cellspacing="0"> 
<tr> 
    <th width="25%">Item</th> 
    <th width="25%">Status 1</th> 
    <th width="25%">Status 2</th> 
    <th width="25%">Status 3</th> 
</tr> 
<tr class="status3"> 
    <td>Stat3</td> 
    <td><i class="circle"></i></td> 
    <td><i class="circle"></i></td> 
    <td><i class="circle"></i></td> 
</tr> 
<tr class="status1"> 
    <td>Stat1</td> 
    <td><i class="circle"></i></td> 
    <td></td> 
    <td></td> 
</tr> 
<tr class="status2"> 
    <td>Stat2</td> 
    <td><i class="circle"></i></td> 
    <td><i class="circle"></i></td> 
    <td></td> 
</tr> 
</table> 

CSS

i.circle {display:block;width:20px;height:20px;border-radius:10px;background:#ccc;margin:auto} 
tr.status3 td:nth-child(2):after, 
tr.status3 td:nth-child(3):after, 
tr.status3 td:nth-child(4):after, 
tr.status2 td:nth-child(2):after, 
tr.status2 td:nth-child(3):after {  
    display: block; 
    width: 50%; 
    background: #ccc; 
    height: 5px; 
    content: ' '; 
    float: right; 
    margin-top: -12px; 
} 
tr.status3 td:nth-child(3):after{ 
    width: 100%; 
} 
tr.status3 td:nth-child(4):after{ 
    width: 50%; 
    float: left; 
} 
tr.status2 td:nth-child(3):after{ 
    width: 50%; 
    float: left; 
} 

次のフィドルを参照してください：

https://jsfiddle.net/0Lz3zfLn/