Hello everyone, it’s me again 
. In this article I continue to give you another way to replace the disadvantages of float + width mentioned above. is to use the table , so how to do it, let’s find out through this article.
Steps to take
Step 1: Create the HTML structure
The HTML structure is still no different
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> progressbar <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> complete <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Step 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> complete <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Step 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> active <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Step 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> Step 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> Step 5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> |
Step 2: Style the ul and li tags
Here I will turn the ul tag into a “table” using display: table + width: 100% and an important attribute which is table-layout: fixed
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.progressbar</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span> <span class="token punctuation">:</span> step <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token comment">/* New */</span> <span class="token property">display</span> <span class="token punctuation">:</span> table <span class="token punctuation">;</span> <span class="token property">table-layout</span> <span class="token punctuation">:</span> fixed <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
And for li have equal width in the table , we need to add display: table-cell
1 2 3 4 5 6 7 8 9 | <span class="token selector">.progressbar li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">position</span> <span class="token punctuation">:</span> relative <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token comment">/* New */</span> <span class="token property">display</span> <span class="token punctuation">:</span> table-cell <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Step 3: Style for li:before
Style has not changed compared to the previous version
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">.progressbar li:before</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token property">border</span> <span class="token punctuation">:</span> 2px solid #bebebe <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 50% <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #bebebe <span class="token punctuation">;</span> <span class="token property">content</span> <span class="token punctuation">:</span> <span class="token function">counter</span> <span class="token punctuation">(</span> step <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">counter-increment</span> <span class="token punctuation">:</span> step <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 700 <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 30px <span class="token punctuation">;</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 27px <span class="token punctuation">;</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 auto 10px <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 30px <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Step 4: Style for li:after
In this version I will no longer use negative left , but use positive values, which means it will clear the horizontal line of the last item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token selector">.progressbar li:after</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #979797 <span class="token punctuation">;</span> <span class="token property">content</span> <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 3px <span class="token punctuation">;</span> <span class="token property">left</span> <span class="token punctuation">:</span> 50% <span class="token punctuation">;</span> <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span> <span class="token property">top</span> <span class="token punctuation">:</span> 15px <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token property">z-index</span> <span class="token punctuation">:</span> -1 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li:last-child:after</span> <span class="token punctuation">{</span> <span class="token property">content</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Step 5: Add specific styles for the active , complete states
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token selector">.progressbar li.complete:after</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #3aac5d <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.active:before, .progressbar li.complete:before</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #3aac5d <span class="token punctuation">;</span> <span class="token property">border-color</span> <span class="token punctuation">:</span> #3aac5d <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.active</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #3aac5d <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 700 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.complete</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #333 <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 700 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The results we have obtained
Conclude
The use of table in this case is quite good, it helps us to divide the width of the items equally to help increase flexibility when there is a change in the number of steps.
If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Wish you success and see you in the following articles!