使用CSS定位数字的html表格日历
我想创建一个完整的网页日历使用html的行为，你可能认为它会。它尽可能在一个屏幕上显示整个月。任何不存在的文本 放入表格单元格会导致当天出现一个小滚动条 到目前为止，我的代码在Chrome中表现得非常好，只是日期数字往往会压缩到前一周 在Firefox中，它忽略了表格单元格的溢出设置，因此表格单元格将丢失其滚动条 （与IE无关） 我的问题是：我怎样才能让数字表现出来呢。如果Firefox也能以同样的方式呈现，那将是一个额外的收获 以下是CSS：使用CSS定位数字的html表格日历,html,css,calendar,html-table,Html,Css,Calendar,Html Table,我想创建一个完整的网页日历使用html的行为，你可能认为它会。它尽可能在一个屏幕上显示整个月。任何不存在的文本 放入表格单元格会导致当天出现一个小滚动条 到目前为止，我的代码在Chrome中表现得非常好，只是日期数字往往会压缩到前一周 在Firefox中，它忽略了表格单元格的溢出设置，因此表格单元格将丢失其滚动条 （与IE无关） 我的问题是：我怎样才能让数字表现出来呢。如果Firefox也能以同样的方式呈现，那将是一个额外的收获 以下是CSS： /* for looking at the o
/* 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;
}
<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>
1.
日期：1
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
2.
日期：2
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
3.
日期：3
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
4.
日期：4
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
5.
日期：5
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
6.
日期：6
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
7.
日期：7
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
8.
日期：8
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
9
日期：9
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
10
日期：10
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
11
日期：11
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
12
日期：12
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
13
日期：13
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
14
日期：14
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
15
日期：15
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
16
日期：16
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
17
日期：17
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
18
日期：18
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
19
日期：19
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
20
日期：20
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
21
日期：21
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
22
日期：22
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
23
日期：23
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
24
日期：24
可能从td末尾流出的一堆文本。一堆文本可能会从td末尾流出。一堆可以流到o的文本
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;
}
*
{
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;
}