我有这个表,它显示了请求的当前状态。示例表格如下所示:HTML
表非常简单,唯一的问题是如何在状态中显示该时间轴。如果它显示如下的时间线或类似的东西,我不介意使用某些网格用于相同目的。
新批准进度中的时间表等
答案 0 :(得分:4)
我建议使用: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>
答案 1 :(得分:0)
我的方法(如果强制使用表格)将应用一些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;
}
请参阅以下小提琴: