DIV Based Table
|Header 1||Header 2||Header 3||Header 4|
|Value 1||Value 2||Value 3||Value 4|
|Value 5||Value 6||Value 7||Value 8|
|Value 9||Value 10||Value 11||Value 12|
|Value 13||Value 14||Value 15||Value 16|
Calendar using DIV based table
As can be seen in this demonstration, the DIV based calendar can be used anywhere in the grid. It fits itself to the full width of its containing element.
The calendar is also fully responsive.
the calendar has empty cells, spaces, elements (call them how you will) which are directly addressed by CSS to add a solid background colour, meaning, the elements are empty for a reason.
If you delete the empty elements the display changes, meaning, the numbers will be under the wrong day. Don't delete the empty elements, they need to be in the calendar block.