固定不均勻行的HTML表格

我正在創建一個頁面，允許用戶從計劃中選擇一個時間段。我寧願用某種表格佈局來做到這一點（與使用下拉/組合框）。但是我很難找出要採取哪條路線，因爲日程安排就像這樣。 alt text 固定不均勻行的HTML表格

所以M，W，F是相同的，T，TR是相同的佈局。我希望能用某種表格而不是純圖形來做到這一點，因爲我希望能夠更新單元格中顯示的信息。有沒有一種方法，而不是做rowpans來獲得像圖片那樣的不均勻佈局。或者我應該採取一種完全不同的方法。我所有的javascript需要知道什麼信息（文本）顯示在單元格中，哪一個被點擊。

來源

2010-11-23 Matt Phillips

「R」爲星期四適當的縮寫，FYI。 – jpsimons 2010-11-23 19:22:40

正式注意！謝謝 – 2010-11-23 19:23:48

以下代碼是使用ROWSPAN屬性的TABLE解決方案。 CSS僅用於設置行高和列寬。

這種方法的一大優點是任何垂直展開的單元格都會導致整行擴展相同的數量，所以您的列和行將永遠不會錯位。

如果您改爲嘗試使用多個表或DIV/CSS驅動的解決方案，則可以使用Javascript爲您重新排列對象，但這可能很難正確實現。

alt text

<html> 
    <head> 
     <style> 
      table{border-collapse:collapse;border-spacing:0} 
      td,th{border:1px solid #000} 
      .m,.w,.f{width:104px} 
      .t,.r{width:117px} 
      .r5{height:12px} 
      .r8{height:20px} 
      .r9{height:27px} 
      .r1,.r10,.r12,.r14{height:60px} 
      .r2,.r7,.r11,.r13{height:18px} 
      .r3,.r4,.r6{height:40px}    
     </style> 
    </head> 
    <body> 
     <table cellspacing="0"> 
      <tr> 
       <th>Monday</th> 
       <th>Tuesday</th> 
       <th>Wednesday</th> 
       <th>Thursday</th> 
       <th>Friday</th> 
      </tr> 
      <tr class="r1"> 
       <td class="m"></td> 
       <td class="t" rowspan="2"></td> 
       <td class="w"></td> 
       <td class="r" rowspan="2"></td> 
       <td class="f"></td> 
      </tr> 
      <tr class="r2"> 
       <td class="m" rowspan="2"></td> 
       <td class="w" rowspan="2"></td> 
       <td class="f" rowspan="2"></td> 
      </tr> 
      <tr class="r3"> 
       <td class="t" rowspan="3"></td> 
       <td class="r" rowspan="3"></td> 
      </tr> 
      <tr class="r4"> 
       <td class="m"></td> 
       <td class="w"></td> 
       <td class="f"></td> 
      </tr> 
      <tr class="r5"> 
       <td class="m" rowspan="2"></td> 
       <td class="w" rowspan="2"></td> 
       <td class="f" rowspan="2"></td> 
      </tr> 
      <tr class="r6"> 
       <td class="t" rowspan="2"></td> 
       <td class="r" rowspan="2"></td> 
      </tr> 
      <tr class="r7"> 
       <td class="m" rowspan="3"></td> 
       <td class="w" rowspan="3"></td> 
       <td class="f" rowspan="3"></td> 
      </tr> 
      <tr class="r8"> 
       <td class="t"></td> 
       <td class="r"></td> 
      </tr> 
      <tr class="r9"> 
       <td class="t" rowspan="3"></td> 
       <td class="r" rowspan="3"></td> 
      </tr> 
      <tr class="r10"> 
       <td class="m"></td> 
       <td class="w"></td> 
       <td class="f"></td> 
      </tr> 
      <tr class="r11"> 
       <td class="m" rowspan="2"></td> 
       <td class="w" rowspan="2"></td> 
       <td class="f" rowspan="2"></td> 
      </tr> 
      <tr class="r12"> 
       <td class="t" rowspan="2"></td> 
       <td class="r" rowspan="2"></td> 
      </tr> 
      <tr class="r13"> 
       <td class="m" rowspan="2"></td> 
       <td class="w" rowspan="2"></td> 
       <td class="f" rowspan="2"></td> 
      </tr> 
      <tr class="r14"> 
       <td class="t"></td> 
       <td class="r"></td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2010-11-23 20:07:45 RedFilter

下面是一個例子使用CSS：

http://jsfiddle.net/byQHE/

它並不完美，但它給你的，你可以做些什麼的想法。

來源

2010-11-23 19:48:58

固定不均勻行的HTML表格

回答

相關問題