Отобразить временную шкалу в таблице HTML

Question

У меня есть эта таблица, в которой отображается текущий статус запроса. Стол образец будет выглядеть, как показано ниже в HTML

Таблица довольно просто, только вопрос заключается в том, чтобы показать, что график в статусе. Я не буду возражать против использования некоторой сетки для той же цели, если она показывает временную шкалу, как показано ниже, или что-то подобное.

Timeline в новом утверждённом Реализуются и т.д.

Answer 1

я предлагаю использовать :before и :after для непрерывной шкалы.

Мы будем иметь два класса для этого: .has-left и .has-right для определения временной шкалы дисплея:

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 селекторы ,

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/