Home How to add a scroll bar in the day of the calendar that the content inside is more than the fixed height?

Questions

How to add a scroll bar in the day of the calendar that the content inside is more than the fixed height?

April 11, 2023

I want to make a calendar with fixed width and height, and if the content in that day is too much, it will have a scroll bar in side the day (Only appear if there have many contents).

I am trying to limit the height of the calendar even if there are content inside each day. However, if the content inside the day is more than the height, it will:

Code:

td {
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: top;
  padding: 10px;
  height: 100px;
}

When I try to add a scroll bar with display: block; and overflow-y: scroll; it become:

Code:

td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  height: 100px;
  display: block;
  overflow-y: scroll;
}

But it does give me what I want for that particular day:

SO, how can I add a scroll bar for the day that have longer content than the height?

>Solution :

Setting the td to display: block will change the way the td works.

I suggest that you add the content of the table cell inside of another div and manipulate the width, height and overflow on the div instead of the td

This way the table elements will act as table elements.

https://jsfiddle.net/tpsznme3/15/