html calendar using tables and divs

by J. Jones

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>
                    <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 off the end of the td.</div>
                </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 off the end of the td.</div>
                </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 off the end of the td.</div>
                </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 off the end of the td.</div>
                </td>
                <td class=calendar_td>
                    <div class=calendar_num>5</div>
                    <div class=scrollable_td>day: 5
         ...

CSS

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;
}