html calendar using tables and divs

HTML

<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>
                   <textarea class="inline-area" readonly="readonly">day: 222
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 off the end of the td.<br/>day22: sdfgdfgdf fdg dfgfd <gfd></gfd></textarea>
                </td>
            </tr>
            <tr class=calendar_row>
                <td class=calendar_td>
                    <div class=calendar_num>2</div>
                    
                </td>
                <td class=calendar_td>
                    <div class=calendar_num>3</div>
                    <textarea class="inline-area" readonly="readonly">day: 2
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 off the end of the td.</textarea>
                </td>
                <td class=calendar_td>
                    <div class=calendar_num>4</div>
<textarea class="inline-area" readonly="readonly">day: 2
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 off the end of the td.</textarea>
                </td>
                <td class=calendar_td>
                    <div class=calendar_num>5</div>
<textarea class="inline-area" readonly="readonly">day: 2
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 off the end of the td.</textarea>
                </td>
          ...

CSS

/* for looking at the outlines of things */
 * {
    border:1px dashed #0000FF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


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

.scrollable_table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    /*overflow: auto;*/
}
.calendar_num {
    position:relative;
    float:right;
    margin-top:1px;
}

.inline-area
{
    width: 100%;
    height: 100%;
}

.scrollable_td {
    width: 100%;
  
    margin: 0;
    padding: 0;
    overflow: auto;
}