固定不均匀行的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表格

回答

相关问题