A few tips for working with layout formats

Tram Ho

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).

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 ).

Watch the movie 4K Blu-ray Vietsub online

If you can’t watch it live, download it at Bluest Eye


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.

Share the news now

Source : Viblo