1. 首頁
  2. 問答
  3. 使用CSS定位數字的HTML表格日曆

使用CSS定位數字的HTML表格日曆

2014-03-03 30 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

相關問題

 相關問題