2012-06-11 13 views
6

Myślę, że ten schemat tego, co próbuję zrobić, będzie bardziej opisowy niż samo pytanie.Czy można zmieniać naprzemiennie rowspany?

+------------------------+-----------------------+ 
|      |      | 
+      +-----------------------+ 
|      |      | 
+------------------------+      + 
|      |      | 
+      +-----------------------+ 
|      |      | 
+------------------------+-----------------------+ 
|      |      | 
+------------------------+-----------------------+ 

Jak widać, próbuję utworzyć tabelę 2 kolumny, gdzie w pewnym momencie powinien móc rowspan jedną z kolumn, a ostatecznie drugi w ciągu najbliższych 2 rzędach.

Czy brakuje jakiegoś oczywistego sposobu na to, czy jakiegoś zaawansowanego tagu/atrybutu tabeli? Lub nie ma po prostu nie ma sposobu, aby to zrobić za pomocą tabel?

Mam świadomość, że można to osiągnąć innymi sposobami, ale stoły są tym, co mnie interesuje i na czym polega pytanie.

Dla porównania: Jest kilka rzeczy, próbowałem i nie udało http://jsfiddle.net/dbtYk/

+0

Heh, ciekawe pytanie, nigdy nie myślałem o tym od 12 lat HTML! * Myślę * to niemożliwe, ale pozwól mi trochę eksperymentować ... Tak czy inaczej, może to być łatwiejsze do zrobienia z normalnymi elementami blokowymi. –

+0

12 lat HTML? o_O Musisz odświeżyć swoją wiedzę. Korzystając z atrybutów 'rowspan' i 'colspan' możesz tworzyć dowolne tabele, nawet te bardzo kreatywne. – micnic

Odpowiedz

6

ile Tęskniłam coś here is an example oparciu o jsfiddle

<table> 
    <tr style="height:20px;"> 
     <td rowspan="2">left</td> 
     <td>right</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td rowspan="2">right</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td rowspan="2">left</td> 
    </tr> 
    <tr style="height:20px;"> 
     <td>right</td> 
    </tr> 
    <tr> 
     <td>left</td> 
     <td>right</td> 
    </tr> 
</table> 

UPDATE

Jak zauważyła Cykada, powyższe działanie niestety nie działa w Chrome.

UPDATE 2

Jak podkreślił Alohci, dodając wysokość sprawia, że ​​działa w Chrome. Powyższe zostało zmienione, aby to odzwierciedlić, wraz z new jsfiddle.

+1

Chyba że coś przeoczyłem, twoje rozwiązanie nie działa (Chrome 19). –

+1

@Cicada - Zaczynam nienawidzić Chrome w taki sam sposób, w jaki nienawidzę IE ... dlaczego żadna z tych przeglądarek nie działa tak samo !! Dziękujemy za wskazanie problemu. – freefaller

+2

Działa, gdy podajesz stół wierszy wysokości. – Alohci

0

Oczywiście, że jest możliwe :-)

<table border="yes"> 
    <tr> 
     <td rowspan="2">1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td rowspan="2">3</td> 
    </tr> 
    <tr> 
     <td rowspan="2">4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>6</td> 
     <td>7</td> 
    </tr> 
</table> 

prostu pominąć komórki, które są już objęte komórek łączony z poprzedniego rzędu.

+1

Uhm ... -2 za co? –

Powiązane problemy