Html timeline inside TR tag

[akshay_khairmode]

Hello Guys,
I am trying to put a timeline inside a table row

this is the code :

Edit fiddle - JSFiddle - Code Playground

Basically what i want is to make the timeline connected/joined without any gap created because of td cells.

Need help. Thanks

[Erik_J]

@akshay_khairmode

Basically what i want is to make the timeline connected/joined without any gap created because of td cells.

White-space can be hard to get rid of, so if you just want a quick fix you could try and change the list margin: 0; to margin: -1px;. to close the gap.

Like:

ol.progtrckr {
        display: table;
        list-style-type: none;
        margin: -1px; /* to close the gap between the lists */
        padding: 0;
        table-layout: fixed;
        width: auto;
    }

OTOH this could be a fun problem to solve if you like.

[ralphm]

Why not just put the green border on the table, and then re-align the ticks slightly to suit?

[Erik_J]

Brilliant solution @ralphm!

[akshay_khairmode]

I am not very familiar with css. Can I please have a jsfiddle link. Thanks

[ronpat]

In your posted code, add {padding:0} to the td element:

td {
    border: none;
    padding:0;  /* ADD Me */
}

Can you do that without needing a new fiddle?

[akshay_khairmode]

Works Thanks