0

I am trying to achieve this design on my react-day-picker component but I am not able to add this two last things.

  • Add a margin on the day-cell / body of the month
  • Add border between both months. Also between the headers.

I have been around for a while trying to achieve and I couldn't... Maybe someone could help me?

I created a sandbox with the design + the prototype.

https://codesandbox.io/s/mqwo1r6p9x

Thanks.

Tomeu Cabot
  • 433
  • 2
  • 8
  • Margins aren’t applicable for these `table-` display types to begin with. If you want spacing inside table cells, then you need to use padding, and maybe wrap an additional container element into it if necessary. – CBroe Apr 25 '18 at 07:59
  • Thanks for the fast answer @CBroe. Base on your comment, the solution should be adding padding into the cells and the background only take a 75% from the center to make it "looks like" it has that margin as in the design, right? Because the other way around is to add the additional container that wouldn't be possible with react + this library, right? – Tomeu Cabot Apr 25 '18 at 08:03
  • 3
    I found a workaround. I changed the `display: table` to `display: grid` and using `:after & :before` pseudo element did the "borders" https://codesandbox.io/s/nnk1r4lq0m – Tomeu Cabot Apr 25 '18 at 12:20

0 Answers0