HTML-таблица с фиксированными неровными строками - PullRequest
Новая
       8

HTML-таблица с фиксированными неровными строками

2 голосов
/ 23 ноября 2010

Я создаю страницу, которая позволяет пользователю выбирать временной интервал из расписания. Я бы предпочел сделать это с помощью какой-то таблицы (вместо использования выпадающих / комбинированных полей). Но я не могу понять, какой путь выбрать, потому что расписание составлено следующим образом. alt text

Таким образом, M, W, F одинаковы, а T, TR одинаковы. Я надеялся сделать это с помощью какой-то таблицы вместо чистой графики, потому что я хочу иметь возможность обновлять информацию, отображаемую в ячейках. Есть ли способ, отличный от выполнения строк, чтобы получить неравномерное расположение, как на картинке. Или я должен использовать совершенно другой подход. Все, что нужно знать моему javascript - это то, какая информация (текст) отображается в ячейке, а какая нажимается.

Ответы [ 2 ]

5 голосов
/ 23 ноября 2010

Код ниже представляет собой решение TABLE, использующее атрибут ROWSPAN.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>
1 голос
/ 23 ноября 2010

Вот пример использования CSS:

http://jsfiddle.net/byQHE/

Это не идеально, но дает представление о том, что вы можете сделать.

...