在HTML表格中显示时间轴

时间:2016-04-18 12:29:53

标签: jquery html css

我有这个表,它显示了请求的当前状态。示例表格如下所示:HTML

enter image description here

表非常简单,唯一的问题是如何在状态中显示该时间轴。如果它显示如下的时间线或类似的东西,我不介意使用某些网格用于相同目的。

新批准进度中的时间表等

2 个答案:

答案 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;
}

请参阅以下小提琴:

https://jsfiddle.net/0Lz3zfLn/