1. 首页
  2. 问答
  3. 使用CSS定位数字的HTML表格日历

使用CSS定位数字的HTML表格日历

2014-03-03 29 views
1

我想创建一个使用html的完整页面日历，其行为与您认为的一样。它尽最大努力在一个屏幕上显示整个月份。任何不符合表格单元的文本 都会导致当天出现一个小滚动条。使用CSS定位数字的HTML表格日历

我迄今为止的代码在Chrome中表现得相当不错，只不过日期数字往往会在前一周被压缩。

chrome rendering of the calendar

在Firefox它忽略了表格单元格的溢出设置，所以表细胞失去滚动条。

firefox rendering of the same calendar

（不与IE有关我自己）

我的问题是：我如何才能让数字来表现自己。如果Firefox能够以同样的方式呈现，那将是一种奖励。

这里的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; 
}

下面是一个 '典型的' 月一些示例代码：

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

这里是一个小提琴calendar fiddle

来源

2014-03-03 slashdottir

回答

1

更改您的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; 
}

Demo Fiddle

来源

2014-03-03 15:20:13 SW4

+0

T他的一个也是在firefox烤面包 – slashdottir

+0

只是试了一遍，它在firefox中工作就好了。我认为这是新的答案。 – slashdottir

+0

虽然我同意这个新的答案。我想指出[有近18年的错误]（https://bugzilla.mozilla.org/show_bug.cgi?id=35168），它阻止了在表格中使用位置绝对元素。这个bug已经解决了，因此这是今天的正确答案。 –

1

唯一的解决方法我能想出的对抗<textarea>

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

版本2进行更换操作<div> S：http://jsfiddle.net/xqJAC/19/

如果你总是使用6行，你可以定义一个行高16.666％，那么这就更清洁了：

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

来源

2014-03-03 15:37:56

+0

哦，这似乎是在两个浏览器中工作。喜欢它。谢谢。 – slashdottir

+1

是的，但在版本1中，高度并不总是100％。我为此发布了一个修复程序，如果您总是发布6行，则可以使用该修复程多一点。 Td的需要溢出：隐藏;也。 –

+0

第二个版本更好，谢谢。如果它不一定是文本区域，这将是理想的，所以可能会有可点击的链接和内容，但也许这是可以通过表格布局完成的最佳选择。 – slashdottir

相关问题

 相关问题