Borders on Table Rows with spacing between rows?
I have a table and I'd like to a space between each row and put a border around each row. I've tried border-collapse separate, but then i'm unable to add a border around the whole row. any ideas?
11 Replies
border spacing works, but if i use it, I can't have a border on the entire row
Use box shadow to make the border instead of using the actual border property.
i tried that too, but it doesnt give me the most control over the size of border
The spread radius controls the border size. You have to set both offsets and the blur radius to 0.
ok, i tried the box shadow with multiple shadows: box-shadow: 3px 3px 0 var(--grey-color), -3 px -3px 0 var(--grey-color); but now i'm getting some weird results on the corners and seeing some "bumps" inside between rows
Those glitches are from using the offsets. My recommendation was to set both offset-x and offset-y to 0. So if you wanted a 3px thickness, the code would be:
This only requires one shadow.
ohhhhhhhhhh, yes now i see! thank you!!!!
But you can!
https://codepen.io/c__beck/pen/zYyYwJx
THANK YOU! that worked perfectly