2012-06-11 27 views
6

Tôi đoán lược đồ này về những gì tôi đang cố gắng làm sẽ mang tính mô tả hơn chính câu hỏi đó.Có thể thay thế các hàng rào không?

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

Như bạn thấy, tôi đang cố gắng để tạo ra một bảng 2 cột nơi tại một số điểm nó sẽ có thể rowspan một trong các cột, và cuối cùng là khác so với 2 hàng tiếp theo.

Tôi có thiếu một số cách rõ ràng để thực hiện điều đó hoặc một số thẻ/thuộc tính bảng nâng cao không? Hoặc không có cách nào để làm điều đó bằng cách sử dụng bảng?

Tôi biết rằng có thể đạt được điều đó bằng cách khác, nhưng bảng là những gì tôi quan tâm và câu hỏi là gì.

Để tham khảo: Có một số điều tôi đã cố gắng và đã không thành công http://jsfiddle.net/dbtYk/

+0

Heh, câu hỏi thú vị, không bao giờ nghĩ về điều này trong 12 năm HTML! Tôi nghĩ * điều này là không thể, nhưng hãy để tôi thử nghiệm một chút ... Dù bằng cách nào, điều này có thể dễ dàng hơn để làm với các yếu tố khối cấp bình thường mặc dù. –

+0

12 năm HTML? o_O Bạn cần phải làm mới kiến ​​thức của bạn. Sử dụng các thuộc tính 'rowspan' và 'colspan' bạn có thể tạo bất kỳ loại bảng nào, thậm chí một số bảng rất sáng tạo. – micnic

Trả lời

6

Trừ khi tôi đã bỏ lỡ một cái gì đó, here is an example dựa trên jsfiddle bạn

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

CẬP NHẬT

Như được chỉ ra bởi Cicada, điều đáng tiếc ở trên không hoạt động trong Chrome.

UPDATE 2

Như đã chỉ ra bởi Alohci, thêm một chiều cao làm cho nó hoạt động trong Chrome. Ở trên đã được sửa đổi để phản ánh điều đó, cùng với một new jsfiddle.

+1

Trừ khi tôi đã bỏ lỡ điều gì đó, giải pháp của bạn không hoạt động (Chrome 19). –

+1

@Cicada - Tôi bắt đầu ghét Chrome giống như cách tôi ghét IE ... tại sao không thể bất kỳ trình duyệt nào trong số này hoạt động theo cùng một cách !! Cảm ơn bạn đã chỉ ra vấn đề – freefaller

+2

Nó hoạt động khi bạn cung cấp cho các hàng của bảng một chiều cao. – Alohci

0

Tất nhiên đó là có thể :-)

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

Chỉ cần bỏ qua các tế bào đã được bao phủ bởi các tế bào spanned từ liên tiếp trước đó.

+1

Uhm ... -2 cho cái gì? –

Các vấn đề liên quan