Boder radius and shadow for table row

user_11588016 0
Viewed 753

How to apply shadow to rows with rounded corner in a table ? When I apply shadow-box to rows the corners appear without radius

https://codepen.io/moonflakes/pen/eYzjOXP

table {
  border-collapse: separate;
  border-spacing: 0px 20px;
}
.first-td {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
}
.inner-td {
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
}
.last-td {
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

th, td {
  padding: 1em;
  border-bottom: 2px solid white; 
}

.css-mine {
  margin-top: 2em;
  clear: both;
}

body {
  margin: 1.5em;
}
.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
html-table css html
1 Answers

Apply the border radius to the table rows like this, which will remove the ugly corners:

.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

This will make all 4 corners of the row have a radius of 10px. In your example, you applied the box shadow to the table row, and therefore the shape of the shadow will be the shape of the element it is applied on, which was originally a rectangle. Applying border-radius: 10px; to the table row will change the shape of the row elements and thus also change the shape of the shadow that they produce.

Also, I can see your logic when applying the borders to the data cell elements, but the way you've done it is unnecessary, and you could simply apply border: 1px solid #d1d1d1; to the table row element or .tr-body class.

user_145534370
Related