user2739418 user2739418 - 7 months ago 137
HTML Question

Display timeline in HTML table

I have this table, which shows the current status of the request. A sample table will look as below in HTML

enter image description here

Table is pretty simple, only issue is how to display that timeline in the status. I won't mind using some grid for same purpose if it shows timeline as below or something similar.

Timeline in New Approved In Progress etc.

Answer

I suggest using :before and :after for continuous timeline.

We will have two classes for that: .has-left and .has-right to define timeline display:

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>

Comments