Question

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

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

新批准进度中的时间表等

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/

在HTML表格中显示时间轴

2 个答案: