是否可以交替使用rowspans？

我想我試圖做的這個模式將比問題本身更具描述性。是否可以交替使用rowspans？

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

正如你所看到的，我想創建一個2列的表，其中在某些時候它應該能夠行跨度的一列，並在接下來的2行，最終對方。

我錯過了一些明顯的做法，或者一些高級的表格標籤/屬性？或者沒有辦法做到這一點使用表？

我知道有可能使用其他方式來實現，但表格是我感興趣的，以及有什麼問題。

參考：有一些事情我已經嘗試過，並沒有成功 http://jsfiddle.net/dbtYk/

來源

2012-06-11 NoBBy

呵呵，有趣的問題，在12年的HTML中從未想過這件事！我*認爲*這是不可能的，但讓我嘗試一下...無論哪種方式，這可能更容易處理正常的塊級元素。 –

12年的HTML？ o_O你需要刷新你的知識。使用屬性'rowspan'和'colspan'你可以創建任何類型的表，甚至是一些非常有創意的表。 – micnic

除非我已經錯過了一些東西，here is an example根據您的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

正如Cicada所指出的，上述遺憾在Chrome中不起作用。

UPDATE 2

正如所指出的Alohci，增加的高度使得它在鉻工作。以上內容已經過修改，以反映這一情況，並附有new jsfiddle。

來源

2012-06-11 11:58:51 freefaller

除非我錯過了一些東西，否則您的解決方案無法正常工作（Chrome 19）。 –

@Cicada - 我開始討厭Chrome，就像我討厭IE一樣......爲什麼這些瀏覽器中的任何一個都不能以同樣的方式工作！感謝您指出問題 – freefaller

一旦您將表格行設置爲高度，它就可以工作。 – Alohci

當然這是可能的:-)

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

只跳過那些已經從前一行覆蓋跨區細胞的細胞。

來源

2012-06-11 12:00:57

呃... -2爲什麼？ –

是否可以交替使用rowspans？

回答

相關問題