固定不規則行的HTML表格

Question

我正在創建一個頁面，該頁面允許用戶從日程表中選擇一個時隙。 我更喜歡使用某種表格布局（相對於使用下拉/組合框）。 但是我很難確定要走哪條路，因為這樣安排了時間表。 替代文字

因此M，W，F相同，T，TR相同。 我希望使用某種表格而不是純圖形來完成此操作，因為我希望能夠更新顯示在單元格中的信息。 除了進行行跨度之外，還有沒有其他方法來獲得不均勻的布局（如圖片）？ 還是應該采用完全不同的方法。 我所有的JavaScript需要知道的是在單元格中顯示了哪些信息（文本），以及正在單擊哪個信息。

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

Answer 2

這是使用CSS的示例：

http://jsfiddle.net/byQHE/

它不是完美的，但是它使您對可以做什么有所了解。

固定不規則行的HTML表格

問題描述

2 個解決方案

解決方案1
5 已采納 2010-11-23 20:07:45

解決方案2
1 2010-11-23 19:48:58

固定不規則行的HTML表格

問題描述

2 個解決方案

解決方案1 5 已采納 2010-11-23 20:07:45

解決方案2 1 2010-11-23 19:48:58

解決方案1
5 已采納 2010-11-23 20:07:45

解決方案2
1 2010-11-23 19:48:58