Hi everyone, I will share one more interesting trick about layout.
Now I will recreate the table I made the day before. Please review to see if it is tidy.
1. Table border radius has border
Usually, to build a 4-rounded rounded table you will think of using border-radius . That’s right, because rounding is the only one, but someone will radius it at the table or selector to td first / last of the first tr and finally radius … Maybe a few more ways but it will be cumbersome. As a result, the table is still not as nice and not really smooth as the design. Because tables and cells ( th, td ) defaults to display: table, table-cel , box-model interventions are risky in different browsers.
Implementation ideas:
- Wrap the table with a div to work around the edges and create borders
- For cells with borders, it is advisable to combine pseudo-class to optimize and avoid fraternal fringe (css being overridden).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wrap <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token comment"><!-- nhiệm vụ để style viền và bo tròn --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> table</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> thead</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> thead</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tbody</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tbody</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> table</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <span class="token selector">.wrap </span> <span class="token punctuation">{</span> <span class="token property">border</span> <span class="token punctuation">:</span> 2px solid #36304a <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 5px <span class="token punctuation">;</span> <span class="token property">overflow</span> <span class="token punctuation">:</span> hidden <span class="token punctuation">;</span> <span class="token comment">// cái này để trị thằng con cứng đầu</span> <span class="token punctuation">}</span> <span class="token selector">table </span> <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 selector">tr </span> <span class="token punctuation">{</span> <span class="token comment">// selector đến những cell không thuộc row cuối cùng</span> & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> last-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token selector">td </span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span> <span class="token punctuation">:</span> 1px dotted gray <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// selector đến những cell thuộc những row chẵn 2, 4, 6...</span> & <span class="token punctuation">:</span> <span class="token function">nth-child</span> <span class="token punctuation">(</span> even <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token selector">td </span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> #fff, 0.7 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">th </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> white <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> #36304a <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">td </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px 20px <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> #fff, .9 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">td, th </span> <span class="token punctuation">{</span> <span class="token comment">// selector đến các cell trừ cell cuối cùng</span> & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> last-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token property">border-right</span> <span class="token punctuation">:</span> 1px dotted gray <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
There, I only demo once for you to see. This way is also simple, short code, not duplicated styled. Let me send the demo link for everyone to see:
Currently codepen is suffering from a security hole or something, getting stuck with capcha is quite annoying so now I switch to this tool, quite fast, light.
2. Table has border using rowspan
In another case, if the table has rowspan , we can handle the border so they do not overlap. Giving border-left or border-right is straightforward. And how to selector the right cells to set horizontal borders is the problem.
The dashed border makes it easy to distinguish the selector
Implementation ideas:
- Construct a table as above, the selector to all cells except the last cell and set
border-left. - The selector to the cells ( except the last row cell and those whose attribute is
[rowspan]row nth place since last ).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wrap <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> table</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> thead</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> th</span> <span class="token punctuation">></span></span> Hích đờ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> th</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> thead</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tbody</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token attr-name">rowspan</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token attr-name">rowspan</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token attr-name">rowspan</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token attr-name">rowspan</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token attr-name">rowspan</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> td</span> <span class="token punctuation">></span></span> ahihi x 3,14 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> td</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tr</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> tbody</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> table</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .wrap <span class="token punctuation">{</span> <span class="token comment">// đoạn này như ở trên</span> <span class="token property">border</span> <span class="token punctuation">:</span> 2px solid #36304a <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 5px <span class="token punctuation">;</span> <span class="token property">overflow</span> <span class="token punctuation">:</span> hidden <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">table </span> <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 comment">// Quan trọng từ đây</span> <span class="token selector">tr </span> <span class="token punctuation">{</span> & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> last-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token selector">td </span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span> <span class="token punctuation">:</span> 1px dashed #9a3232 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Selector đến hàng thứ n đếm từ dưới lên. Mình đang dùng rowspan = 3 nên mình selector tương ứng</span> & <span class="token punctuation">:</span> <span class="token function">nth-last-child</span> <span class="token punctuation">(</span> 3 <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token selector">td[rowspan] </span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token comment">// cái này để reset border bottom đi tránh trùng</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">//- đến đây thôi, phần bên dưới styled như table trước</span> <span class="token selector">td </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px 20px <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> #fff, .9 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> white <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> #36304a <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">td, th </span> <span class="token punctuation">{</span> & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> last-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token property">border-right</span> <span class="token punctuation">:</span> 1px solid #36304a <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Watch the movie 4K Blu-ray Vietsub online
If you can’t watch it live, download it at Bluest Eye
summary
Those are the 2 types of tables that we often encounter, these days, I have coded on the Admin side, so I guess I’ll share with you some good tricks about tables in the following episodes. Everyone, please wait and support and if there are any interesting tricks or other optimal ways, do not hesitate to share. Thank you and wish everyone the remote season many memories, good health and common sense, but I miss the company already.