{"id":1820,"date":"2017-07-08T16:35:02","date_gmt":"2017-07-08T23:35:02","guid":{"rendered":"https:\/\/ginastricklind.com\/?p=1820"},"modified":"2017-07-08T16:35:02","modified_gmt":"2017-07-08T23:35:02","slug":"how-to-create-rounded-table-rows-using-pseudo-css","status":"publish","type":"post","link":"https:\/\/ginastricklind.com\/how-to-create-rounded-table-rows-using-pseudo-css\/","title":{"rendered":"How To Create Rounded Table Rows Using Pseudo CSS"},"content":{"rendered":"

border-radius<\/a> applies to all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined.<\/p>\n

We can, however, create a pseudo block element on table<\/code> and td<\/code> (but not tr<\/code>, because it just doesn’t work) and use that to assign a border-radius<\/code>. My end goal was to have what appeared to be “rows” of grouped information to make the data easier and quicker to digest.<\/p>\n

The CSS in this example is using Bootstrap as a base. And the final solution was implemented using a custom HTML module in Beaver Builder for the table.<\/p>\n

Setting up the :before pseudo block element<\/h2>\n

We want to target only the first cells (first-child) in each row (th & tr). If we don’t do this, we’ll end up with rounded borders in each cell block, which in my case isn’t what I want. Lastly, we’ll add on the last-child.<\/p>\n

table tr th:first-child:before, table tr th:last-child:before, table tr td:first-child:before, table tr td:last-child:before {
\ncontent: \"\";
\ndisplay: block;
\nwidth: 40px;
\nheight: 40px;
\nbackground-color: blue;
\nposition: absolute;
\n}
\ntable tr th:first-child:before, table tr td:first-child:before {
\ntop: -2px;
\nleft: -2px;
\nborder-top: 2px solid orange;
\nborder-left: 2px solidorange;
\nborder-top-left-radius: 5px;
\n}<\/code><\/p>\n

\"\"<\/p>\n

The border width on the table cells is 2px (per bootstrap). So we give\u00a0the pseudo blocks a negative position so that the border lines up with the one underneath. Then change the orange border to match the same color as the background or underlying border color, and making the blue background transparent, we’re able to essentially\u00a0cover up the 90\u00b0 edge on the cell and make it appear to be rounded.<\/p>\n

Adding more pseudo :before & :after<\/h2>\n

Once that is set, we can continue on with adding the other 3 pseudo blocks, i.e. hiding that hard edge.<\/p>\n

You can get the full gist from the pen below:<\/strong><\/p>\n

See the Pen Rounded Table Rows (faux) <\/a> by Gina Stricklind (@gstricklind<\/a>) on CodePen<\/a>.<\/p>\n