Question

我正在创建一个页面，允许用户从计划中选择一个时间段。我更喜欢使用某种表布局（与使用下拉/组合框相比）。但是我很难弄清楚要走哪条路，因为时间安排是这样的。 alt text

所以M，W，F是相同的，T，TR是相同的布局。我希望用某种表而不是纯图形来做这件事，因为我希望能够更新单元格中显示的信息。是否有一种方法，除了做rowpans以获得像图片一样的不均匀布局。或者我应该采取完全不同的方法。我的所有javascript需要知道的是单元格中显示的信息（文本）以及单击的信息。

Answer 1

以下代码是使用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>

Answer 2

以下是使用CSS的示例：

http://jsfiddle.net/byQHE/

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

具有固定不均匀行的HTML表

2 个答案: