Hello Guys,
Below is my fiddle for a progress timeline.
The issue in this is that i need to remove the lines at the front and back. ie the timeline must start from first tick and end at last tick.
Please Help. Thanks
Is this an offshoot of this thread:
Html timeline inside TR tag
Who is the real owner of this topic?
What is a tick?
1 Like
This is a tick. You may know it as a check mark.
1 Like
I didn’t make the connection with the circles because the timeline does seem to start at the beginning and end at the end. Guess he doesn’t want the line to extend past the end circles???
Hopefully we will see some clarification.
yes ,i want remove beginning and last line.
A white overlay covers the ends of the line. No changes to the HTML. CSS only changes. Used the classes that you submitted.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>sandeepvosmos</title>
<!--
https://www.sitepoint.com/community/t/removing-first-and-last-line-from-timeline-css/247113
sandeepvosmos
https://jsfiddle.net/zcsn6h1u/
-->
<style type="text/css">
table {border-spacing:0;} /* ADDED */
th,td {padding:0;} /* ADDED */
div.progtrckr-table {
width:100%;
display:table;
table-layout:fixed;
margin-bottom:20px;
}
div.progtrckr-table div {
display:table-cell;
width:2%;
text-align:center;
padding-bottom:0.5em;
vertical-align:bottom;
position:relative; /* ADDED */
}
div.progtrckr-table div.progtrckr-done,
div.progtrckr-table div.progtrckr-doing {
color:black;
border-bottom:4px solid yellowgreen;
}
div.progtrckr-table div.progtrckr-todo {
color: silver;
border-bottom:4px solid silver;
}
/* CHANGED (modified) from here to end */
div.progtrckr-table div:after {
content:"";
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
bottom:-1.25em;
}
div.progtrckr-table div.progtrckr-done:after,
div.progtrckr-table div.progtrckr-doing:after,
div.progtrckr-table div.progtrckr-todo:after {
content:"\2713";
color:white;
background-color:yellowgreen;
height:1.2em;
width:1.2em;
border-:none;
border-radius: 1.2em;
}
div.progtrckr-table div.progtrckr-doing:after {
content: "\039F";
}
div.progtrckr-table div.progtrckr-todo:after {
content: "\039f";
color: silver;
background-color: white;
}
.step {display:block;}
/* ADDED from here to end. Places an overlay over the ends of the lines. */
td:first-child .progtrckr-table div:before,
td:last-child .progtrckr-table div:before {
content:"";
position:absolute;
width:50%;
height:4px;
left:0;
top:100%;
background-color:#fff;
}
td:last-child .progtrckr-table div:before {
left:auto;
right:0;
}
</style>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="text-center">QC</th>
<th class="text-center">Forward</th>
<th class="text-center">Shortlisted</th>
<th class="text-center">Interviews</th>
<th class="text-center">offer</th>
<th class="text-center">joined</th>
<th class="text-center">probation</th>
<th class="text-center">payment</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="progtrckr-table">
<div class="progtrckr-done">
<span class="step"></span>
</div>
</div>
</td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
1 Like
hey ronpat ,thanks for that it’s working .Can you please also tell me how can I stop the progress at the check mark (tick mark) instead of it going half way ahead of the check mark. By half way I mean when the class change to todo
<td><div class="progtrckr-table"><div class="progtrckr-todo"><span class="step"></span></div></div></td>
You can do it in the same way that Ron rubbed out the end of the lines except you use a silver background.
e.g.
div.progtrckr-table div.progtrckr-half:before{
content:" ";
position:absolute;
height:4px;
width:50%;
bottom:-4px;
right:0;
background:silver;
}
Then add the new class as required.
Full html and CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>sandeepvosmos</title>
<!--
https://www.sitepoint.com/community/t/removing-first-and-last-line-from-timeline-css/247113
sandeepvosmos
https://jsfiddle.net/zcsn6h1u/
-->
<style type="text/css">
table {border-spacing:0;} /* ADDED */
th,td {padding:0;} /* ADDED */
div.progtrckr-table {
width:100%;
display:table;
table-layout:fixed;
margin-bottom:20px;
}
div.progtrckr-table div {
display:table-cell;
width:2%;
text-align:center;
padding-bottom:0.5em;
vertical-align:bottom;
position:relative; /* ADDED */
}
div.progtrckr-table div.progtrckr-done,
div.progtrckr-table div.progtrckr-doing {
color:black;
border-bottom:4px solid yellowgreen;
}
div.progtrckr-table div.progtrckr-todo {
color: silver;
border-bottom:4px solid silver;
}
/* CHANGED (modified) from here to end */
div.progtrckr-table div:after {
content:"";
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
bottom:-1.25em;
}
div.progtrckr-table div.progtrckr-done:after,
div.progtrckr-table div.progtrckr-doing:after,
div.progtrckr-table div.progtrckr-todo:after {
content:"\2713";
color:white;
background-color:yellowgreen;
height:1.2em;
width:1.2em;
border-:none;
border-radius: 1.2em;
}
div.progtrckr-table div.progtrckr-doing:after {
content: "\039F";
}
div.progtrckr-table div.progtrckr-todo:after {
content: "\039f";
color: silver;
background-color: white;
}
.step {display:block;}
/* ADDED from here to end. Places an overlay over the ends of the lines. */
td:first-child .progtrckr-table div:before,
td:last-child .progtrckr-table div:before {
content:"";
position:absolute;
width:50%;
height:4px;
left:0;
top:100%;
background-color:#fff;
}
td:last-child .progtrckr-table div:before {
left:auto;
right:0;
}
div.progtrckr-table div.progtrckr-half:before{
content:" ";
position:absolute;
height:4px;
width:50%;
bottom:-4px;
right:0;
background:silver;
}
</style>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="text-center">QC</th>
<th class="text-center">Forward</th>
<th class="text-center">Shortlisted</th>
<th class="text-center">Interviews</th>
<th class="text-center">offer</th>
<th class="text-center">joined</th>
<th class="text-center">probation</th>
<th class="text-center">payment</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="progtrckr-table">
<div class="progtrckr-done">
<span class="step"></span>
</div>
</div>
</td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-done progtrckr-half"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-todo"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-todo"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-todo "><span class="step"></span></div></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to add the extra class on the item before.
<td><div class="progtrckr-table"><div class="progtrckr-done progtrckr-half"><span class="step"></span></div></div></td>
<td><div class="progtrckr-table"><div class="progtrckr-todo"><span class="step"></span></div></div></td>
2 Likes
Think I’ll join the party in this thread too.
Instead of as usual go with the posted code I prefer to restructure it some while keeping the timeline. The steps are made of three parts of a CSS sub table to be easy manipulated. Demo:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Time Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
html,
body{
margin:0;
box-sizing:border-box;
padding:0;
font:1em/1.2 arial,sans-serif;
}
*, *:before, *:after{
box-sizing:inherit;
}
.container{
padding:2em;
}
.timeline{
border-collapse:collapse;
table-layout:fixed;
width:100%;
background:silver;
text-align:center;
}
.timeline tbody td{
padding:0 0 1.2em;
background:gold;
}
.timeline div{
display:table;
border-collapse:collapse;
width:100%;
padding:0 0 0.5em;
vertical-align:middle;
text-align:center;
}
.timeline div:before,
.timeline div:after{
display:table-cell;
border-bottom:4px solid;
content:"\a0";
}
.timeline td:first-child div:before,
.timeline td:last-child div:after{
border-color:transparent;
}
.timeline-status{
display:table-cell;
width:1px;
color:white;
}
.timeline-status:after{
display:inline-block;
position:relative;
bottom:-.6em;
border-radius:1.2em;
width:1.2em;
vertical-align:middle;
font-size:1em;
line-height:1.2;
}
.timeline-done{
color:green;
}
.timeline-done span:after{
background:green;
color:white;
content:"\2714";
}
.timeline-doing{
color:olive;
}
.timeline-doing span:after{
background:olive;
content:"\25ba";
}
.timeline-todo{
color:silver;
}
.timeline-todo span:after{
background:silver;
content:"\25fe";
}
</style>
</head><body>
<div class="container">
<table class="timeline">
<thead>
<tr>
<th>QC</th>
<th>Forward</th>
<th>Shortlisted</th>
<th>Interviews</th>
<th>Offer</th>
<th>Joined</th>
<th>Probation</th>
<th>Payment</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Step 1</td>
<td>Step 2</td>
<td>Step 3</td>
<td>Step 4</td>
<td>Step 5</td>
<td>Step 6</td>
<td>Step 7</td>
<td>Step 8</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><div class="timeline-done"><span class="timeline-status"></span></div></td>
<td><div class="timeline-done"><span class="timeline-status"></span></div></td>
<td><div class="timeline-done"><span class="timeline-status"></span></div></td>
<td><div class="timeline-done"><span class="timeline-status"></span></div></td>
<td><div class="timeline-done"><span class="timeline-status"></span></div></td>
<td><div class="timeline-doing"><span class="timeline-status"></span></div></td>
<td><div class="timeline-todo"><span class="timeline-status"></span></div></td>
<td><div class="timeline-todo"><span class="timeline-status"></span></div></td>
</tr>
</tbody>
</table>
</div>
</body></html>
(Had to make a quick post, I’ll be AFK for an hour now, sorry. )
3 Likes
Another “just for fun”.
If one doesn’t mind using one pair of empty span tags per td cell, the structure becomes very logical and relatively easy.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>timeline5</title>
<!--
https://www.sitepoint.com/community/t/removing-first-and-last-line-from-timeline-css/247113
sandeepvosmos
-->
<style>
table.progtracker {
border-spacing:0 0;
border:none;
width:100%;
margin-top:2em; /* Added temporarily to separate the tables for this demo. */
}
.progtracker th,
.progtracker td {
width:1%;
text-align:center;
position:relative;
border:1px dotted magenta; /* TEST outline. TO BE Deleted. */
white-space:nowrap; /* optional */
padding:0;
}
.progtracker th {
padding-bottom:.375em;
}
.progtracker td {
padding-top:.375em;
}
.progtracker td.done::before,
.progtracker td.done::after,
.progtracker td.doing::before,
.progtracker td.doing::after,
.progtracker td.todo::before,
.progtracker td.todo::after {
content:"";
display:block;
position:absolute;
left:0;
bottom:.5em;
width:50%;
border-top:.3125em solid yellowgreen;
}
.progtracker td.done::after {
left:auto;
right:0;
border-top:.3125em solid yellowgreen;
}
.progtracker td.doing::after,
.progtracker td.todo::after {
left:auto;
right:0;
border-top:.3125em solid silver;
}
.progtracker td.todo::before {
border-top:.3125em solid silver;
}
.progtracker td span {
display:block;
height:1em;
width:1em;
font-size:1.25em;
line-height:1;
color:white;
background-color:transparent; /* placeholder (reminder) */
border-radius:50%;
position:relative;
z-index:1;
padding:1px;
margin:0 auto;
}
.progtracker td.done span {
background-color:yellowgreen;
}
.progtracker td.done span::after {
content:"\2713";
}
.progtracker td.doing span {
background-color:black;
}
.progtracker td.doing span::after {
content:"\2713";
}
.progtracker td.todo span {
background-color:silver;
}
.progtracker td.todo span::after {
content:"\039f";
}
.progtracker td:first-child::before,
.progtracker td:last-child::after {
border-top:0 none;
}
</style>
</head>
<body>
<table class="progtracker">
<thead>
<tr>
<th>QC</th>
<th>Forward</th>
<th>Shortlisted</th>
<th>Interviews</th>
<th>offer</th>
<th>joined</th>
<th>probation</th>
<th>payment</th>
</tr>
</thead>
<tbody>
<tr>
<td class="done"><span></span></td>
<td class="done"><span></span></td>
<td class="done"><span></span></td>
<td class="doing"><span></span></td>
<td class="todo"><span></span></td>
<td class="todo"><span></span></td>
<td class="todo"><span></span></td>
<td class="todo"><span></span></td>
</tr>
</tbody>
</table>
<table class="progtracker">
<thead>
<tr>
<th>QC</th>
<th>Forward</th>
<th>Shortlisted</th>
<th>Interviews</th>
<th>offer</th>
<th>joined</th>
</tr>
</thead>
<tbody>
<tr>
<td class="done"><span></span></td>
<td class="done"><span></span></td>
<td class="done"><span></span></td>
<td class="doing"><span></span></td>
<td class="todo"><span></span></td>
<td class="todo"><span></span></td>
</tr>
</tbody>
</table>
</body>
</html>
3 Likes
Here’s another just for fun using a simple list with no extra elements. 
I also added in a media query to swap to vertical for smaller devices.
5 Likes
<ot>
That is just remarkable. Well envisioned and beautifully coded. Mr. Paul, your code is like a living, evolving art gallery.
Another home run for @PaulOB.
(Sorry, “fluff” me. I don’t want to contain myself.) 
</ot>
5 Likes
OT)
Well done, I think you could quote Jimi Hendrix playing now: “I’ll pull all stops”.
/OT)
3 Likes
Thanks guys , it’s working as expected now .sorry for the late reply because of weekend .
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.