请解释奇怪的HTML表行跨行为

时间:2012-08-29 07:14:02

标签: html html-table

考虑以下HTML表定义。

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

问题:

  1. 浏览器的行为是否正确?如果是这样,为什么在上面给出的第一个HTML片段的情况下,表格会非直观地崩溃?

  2. 是否有任何有效的HTML / css会强制表格按照我的意图显示?

2 个答案:

答案 0 :(得分:5)

我认为这确实有效...... 你的细胞高度不固定,所以好像它不起作用。但如果你这样尝试:

<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中定义单元格高度,或者像我上面所描述的那样。

答案 1 :(得分:-1)

也许这可以帮到你!我有同样的问题:“rowspan不工作”。我尝试了高度属性技巧,但它没有帮助。在互联网上搜索了几个小时的另一个技巧后,我注意到我的tr标签没有正确关闭:<tr>...<tr>而不是<tr>...</tr>,我的rowspan呈现出预期的效果。