具有固定不均匀行的 HTML 表格答案

【问题标题】：HTML table with fixed uneven rows具有固定不均匀行的 HTML 表格
【发布时间】：2011-05-14 16:17:32
【问题描述】：

我正在创建一个页面，允许用户从时间表中选择一个时间段。我更喜欢使用某种表格布局（而不是使用下拉/组合框）来做到这一点。但是我很难弄清楚要走哪条路，因为日程安排是这样的。

所以 M,W,F 是相同的，T,TR 是相同的布局。我希望使用某种表格而不是纯图形来执行此操作，因为我希望能够更新单元格中显示的信息。除了做行跨度之外，还有没有其他方法可以得到如图所示的不均匀布局。或者我应该采取完全不同的方法。我所有的 javascript 需要知道的是单元格中显示了哪些信息（文本）以及正在单击哪个信息。

【问题讨论】：

“R”是星期四的正确缩写，仅供参考。
darkporter：谁说的？ R 远不如 Th 常见，或者只是 T。
@Jeff B: R 被广泛接受为星期四，就像U 被广泛接受为星期日一样。UMTWRFS 对我来说比 SMTWTFS 更有意义

标签： javascript html layout tablelayout

【解决方案1】：

下面的代码是使用ROWSPAN 属性的TABLE 解决方案。 CSS 仅用于设置行高和列宽。

这种方法的最大优点是任何垂直扩展的单元格都会导致整行扩展相同的量，因此您的列和行将永远不会错位。

如果您尝试使用多个表格或 DIV/CSS 驱动的解决方案，则可以使用 Javascript 为您重新调整内容，但这可能很难正确实施。

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

【讨论】：

很好的答案，但请进一步考虑 - 每天都被分成时间块，可能是 15 分钟块。周二/周四中间的薄片可能是15分钟，45分钟以上的块，75分钟以下的一个。我会根据 15 分钟设置行跨度。即使没有单个 15 分钟的块（例如，rowspan=2 是最小的时隙）。只是一个想法。
@Stephen P：一个有趣的想法 - 这使得确定 rowspan 值变得容易，但也意味着会有更多的表行（例如，8 小时的时间跨度为 32）。不知道最后我更喜欢哪一个。
好吧，时间段也不太适合 15 分钟的间隔。所以我并不真正关心这一点。

【解决方案2】：

这是一个使用 CSS 的示例：

http://jsfiddle.net/byQHE/

它并不完美，但它让你知道你能做什么。

【讨论】：