CODEWITHSUNDEEP
htmlcsscalendarhtml-table
slashdottir
slashdottir

Reputation: 8536

An html table calendar using CSS positioned numbers

I would like to create a full-page calendar using html that behaves as you might think it would. It does its best to display the whole month in one screen. Any text that doesn't fit into the table cell causes a little scrollbar to appear for that day.

The code I have so far behaves itself pretty well in Chrome except that the day numbers tend to get squashed into the previous week.

chrome rendering of the calendar

In Firefox it ignores the overflow setting of the table cells, so the table cells lose their scrollbars.

firefox rendering of the same calendar

(not concerning myself with IE)

My question is: How can I get the numbers to behave themselves. If Firefox could render the same way too, that would be a bonus.

Here's the CSS:

/* for looking at the outlines of things */
 * {
    border:1px dashed #0000FF;
}
.scrollable_table {
    width: 100%;
    height: 100%;
    /*overflow: auto;*/
}
.calendar_num {
    position:relative;
    display: inline-block;
    float:right;
    margin-top:1px;
}
.calendar_row {
    width:100%;
}
.calendar_td {
    width:14%;
    /*height:14%; */
}
.scrollable_td {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

Here's some example code for a 'typical' month:

<html><head>
  <link type='text/css' rel='stylesheet' href='/static/calendar.css' />
  <body>
    <table class=scrollable_table>
      <tr class=calendar_row>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td>
          <div class=calendar_num>1</div>
          <div class=scrollable_td>day: 1
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>2</div>
          <div class=scrollable_td>day: 2
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>3</div>
          <div class=scrollable_td>day: 3
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>4</div>
          <div class=scrollable_td>day: 4
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>5</div>
          <div class=scrollable_td>day: 5
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>6</div>
          <div class=scrollable_td>day: 6
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>7</div>
          <div class=scrollable_td>day: 7
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>8</div>
          <div class=scrollable_td>day: 8
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>

      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>9</div>
          <div class=scrollable_td>day: 9
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>10</div>
          <div class=scrollable_td>day: 10
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>11</div>
          <div class=scrollable_td>day: 11
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>12</div>
          <div class=scrollable_td>day: 12
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>13</div>
          <div class=scrollable_td>day: 13
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>14</div>
          <div class=scrollable_td>day: 14
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>15</div>
          <div class=scrollable_td>day: 15
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>16</div>
          <div class=scrollable_td>day: 16
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>17</div>
          <div class=scrollable_td>day: 17
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>18</div>
          <div class=scrollable_td>day: 18
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>19</div>
          <div class=scrollable_td>day: 19
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>20</div>
          <div class=scrollable_td>day: 20
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>21</div>
          <div class=scrollable_td>day: 21
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>22</div>
          <div class=scrollable_td>day: 22
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>23</div>
          <div class=scrollable_td>day: 23
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>24</div>
          <div class=scrollable_td>day: 24
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>25</div>
          <div class=scrollable_td>day: 25
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>26</div>
          <div class=scrollable_td>day: 26
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>27</div>
          <div class=scrollable_td>day: 27
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>28</div>
          <div class=scrollable_td>day: 28
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>29</div>
          <div class=scrollable_td>day: 29
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>30</div>
          <div class=scrollable_td>day: 30
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>31</div>
          <div class=scrollable_td>day: 31
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
      </tr>
    </table>
  </body>
</html>

And here is a fiddle calendar fiddle

Upvotes: 1

Views: 2547

Answers (2)

Nico O
Nico O

Reputation: 14112

The only fix i can come up with is replaceing the <div>s against <textarea>

http://jsfiddle.net/NicoO/xqJAC/15/

Version2: http://jsfiddle.net/xqJAC/19/

If you always use 6 rows, you can define a row height of 16.666%, then this is more clean:

 *
{ 
    border:1px dashed #0000FF; 
}


html,body
{
    height: 100%;
    margin:0;
    padding:0; 
}

.scrollable_table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    /*overflow: auto;*/
}

.scrollable_table tbody  > tr
{ 
    height: 16.666%;
}

.calendar_num {
    text-align: right;
    height: 20px;
}

.scrollable_table td
{
   vertical-align: top;
   overflow: hidden;
}


.inline-area
{
    width: 100%;
    height: calc(100% - 20px);
    overflow: auto;
    display: block;
    margin: 0;
    padding: 0;
}

Upvotes: 1

SW4
SW4

Reputation: 71170

Change your CSS to:

html,body{
    height:100%;
    width:100%;
}
/* for looking at the outlines of things */
 * {
    border:1px dashed #0000FF;
}
.scrollable_table {
    width: 100%;
    height: 100%;
    cell-spacing:0;
    cell-padding:0;
    margin:0;
    padding:0;
    border-collapse:collapse;
    /*overflow: auto;*/
}
.calendar_num {
    position:absolute;
    top:0;
    height:20px;
    text-align:right;
    width:100%;
}
.calendar_row {
    width:100%;
}
.calendar_td {
    width:14%;
    position:relative;
}
.scrollable_td {
    width: 100%;
    position:absolute;
    bottom:0;
    top:20px;
    margin: 0;
    padding: 0;
    overflow:auto;
}

Demo Fiddle

Upvotes: 1

Related Questions