請解釋奇怪的HTML表格rowspan行爲

請考慮以下HTML表格定義。請解釋奇怪的HTML表格rowspan行爲

<table> 
<tbody> 
    <tr> 
    <td rowspan='2'>A</td> 
    <td>2</td> 
    <td rowspan='2'>B</td> 
    </tr> 
    <tr> 
    <td rowspan='2'>C</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>3</td> 
    </tr> 
</tbody> 
</table>

我想到表的樣子：

+---+---+---+ 
| A | 2 | B | 
| +---+ | 
| | C | | 
+---+ +---+ 
| 1 | | 3 | 
+---+---+---+

但在Firefox，IE8和Chrome，表呈現，如：

+---+---+---+ 
| A | 2 | B | 
+---+---+---+ 
| 1 | C | 3 | 
+---+---+---+

如果我添加另一列表如下：

<table> 
<tbody> 
    <tr> 
    <td>a</td> 
    <td rowspan='2'>A</td> 
    <td>2</td> 
    <td rowspan='2'>B</td> 
    </tr> 
    <tr> 
    <td>b</td> 
    <td rowspan='2'>C</td> 
    </tr> 
    <tr> 
    <td>c</td> 
    <td>1</td> 
    <td>3</td> 
    </tr> 
</tbody> 
</table>

.. 。我得到以下，這更像是我想要的。

+---+---+---+---+ 
| a | A | 2 | B | 
+---+ +---+ | 
| b | | C | | 
+---+---+ +---+ 
| c | 1 | | 3 | 
+---+---+---+---+

問題：

是否正確行爲的瀏覽器？如果是這樣，爲什麼在上面給出的第一個HTML片段的情況下，該表非直觀地崩潰？
是否有任何有效的HTML/CSS強制表顯示，因爲我打算？

來源

2012-08-29 Tom

我認爲這實際工作... 你的細胞高度是不固定的，所以它看起來好像它不工作。但是，如果你嘗試這樣的：

<table border="1"> 
<tr> 
    <td height="50px" rowspan="2">A</td> 
    <td>2</td> 
    <td rowspan="2">B</td> 
</tr> 
<tr> 
    <td rowspan="2">C</td> 
</tr> 
<tr> 
    <td>1</td>> 
    <td>3</td> 
</tr> 
</table>

你會看到，只要你想表的行爲：

Table Result with border http://img8.myimg.de/Bildschirmfoto148e98_thumb.jpg

所以，如果你希望你的表格看起來像你解釋，我覺得所有你需要做的就是在CSS中定義單元格高度或者像上面描述的那樣。

來源

2012-08-29 07:41:05 HashtagMarkus

我已確認您的解決方案可以工作（使用css），但它要求將高度樣式規則應用於特定的td元素。我仍然希望能夠更容易地適用於一般情況的解決方案。而且我仍然很好奇瀏覽器爲何如此行事。 – Tom

行爲並不奇怪。它與單元格的寬度相同。如果你沒有定義寬度，它將與內容對齊。這與高度和rowspan =「2」相同。如果您在單元格A，B或C中放置更多內容，則不需要高度屬性。爲什麼你認爲它很難適用於定義一個包含rowspan定義和高度的css類？所以你會使用''。 – HashtagMarkus

通過創建轉置表（行變爲列）並觀察渲染，我確認了寬度和高度相同的行爲。結果如你所料。所以我確信這只是HTML表格的工作方式。 – Tom

-1

也許這可以幫助！我有同樣的問題：「rowspan不工作」。我嘗試了高度屬性技巧，但它沒有幫助。在互聯網上搜索了幾個小時後，我發現我的tr標籤沒有正確關閉：<tr>...<tr>而不是<tr>...</tr>，並且我的行跨度像預期的那樣呈現。

來源

2014-05-10 08:09:06 Didier

請解釋奇怪的HTML表格rowspan行爲

回答

相關問題