考虑以下 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>
您会看到表格的行为如您所愿:
(来源:myimg.de)
所以如果你想让你的表格看起来像你解释的那样,我认为你需要做的就是在 css 中定义单元格高度或像我上面描述的那样。
关于html - 请解释奇怪的 HTML 表格 rowspan 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12172626/