Tabela HTML com linhas desiguais fixas

StackOverflow https://stackoverflow.com/questions/4259891

Pergunta

Estou criando uma página que permite ao usuário selecionar um slot de tempo de um cronograma. Eu preferiria fazer isso com algum tipo de layout de tabela (vs. usando caixas suspensas/combinadas). Mas estou tendo problemas para descobrir qual caminho seguir, porque o cronograma é estabelecido assim.alt text

Então, M, W, F são iguais e T, TR são o mesmo layout. Eu esperava fazer isso com algum tipo de tabela em vez de gráfico puro, porque quero poder atualizar as informações exibidas nas células. Existe um método além de fazer linhas para obter o layout desigual como a imagem. Ou devo adotar uma abordagem completamente diferente. Todo o meu JavaScript precisa saber é quais informações (texto) são exibidas na célula e qual está sendo clicada.

Foi útil?

Solução

O código abaixo é um TABLE solução usando o ROWSPAN atributo. O CSS é confiado apenas para definir alturas de linha e larguras da coluna.

A grande vantagem dessa abordagem é que qualquer célula que expanda verticalmente fará com que toda a linha expanda a mesma quantidade, para que suas colunas e linhas nunca fiquem desalinhadas.

Se você tentar um para usar mais de uma tabela ou uma solução Div/CSS, poderá usar o JavaScript para realinhar as coisas para você, mas isso pode ser bastante difícil de implementar corretamente.

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>

Outras dicas

Aqui está um exemplo usando CSS:

http://jsfiddle.net/byqhe/

Não é perfeito, mas dá uma idéia do que você pode fazer.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top