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

概述请考虑以下 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> </ 请考虑以下 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 |+---+---+---+---+

问题：

>浏览器是否正常运行？如果是这样,为什么在上面给出的第一个HTML片段的情况下,表格会非直观地崩溃？
>是否有任何有效的HTML / CSS会强制表格按照我的意图显示？

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

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

总结

以上是内存溢出为你收集整理的请解释奇怪的HTML表行跨行为全部内容，希望文章能够帮你解决请解释奇怪的HTML表行跨行为所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。