Html表，行跨度问题
Html表，行跨度问题
提问于 2014-08-26 15:34:15
我想建一张这样的桌子
这是我的解决方案：
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
</tr>
<tr><td rowspan="3"></td><td rowspan="2"></td></tr>
<tr><td rowspan="2"></td></tr>
</table>
</body>
</html>这似乎是合乎逻辑的，但在任何浏览器上都不起作用。在HTML中有任何方法来构建这样的表吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-26 15:44:41
你只有3行，所以这是行不通的。当您用rowspan="6"定义第一个单元格时，您至少需要6行。
您可以通过想象横过图表的6行来布局单元格，然后可以看到给定单元格开始的行。下图显示了每个单元按第一次相遇的顺序；
因此，下面的代码将生成该布局；
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"> </td> <!-- Box 1 -->
<td rowspan="3"> </td> <!-- Box 2 -->
<td rowspan="2"> </td> <!-- Box 3 -->
</tr>
<tr></tr>
<tr><td rowspan="2"> </td></tr> <!-- Box 4 -->
<tr><td rowspan="3"> </td></tr> <!-- Box 5 -->
<tr><td rowspan="2"> </td></tr> <!-- Box 6 -->
<tr></tr>
</table>
</body>
</html> 是为了让我能看到结构。
希望这能有所帮助。
Stack Overflow用户
发布于 2014-08-26 15:37:01
试一试：
<table style="border: 1px solid #999">
<tr>
<td rowspan="4"> </td>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>Stack Overflow用户
发布于 2014-08-26 15:44:38
您可以使用6/3/2行跨度，但需要包含正在跨越的空行。例如：
<table border="1px">
<tr>
<th rowspan="6">6</th>
<td rowspan="3">3</td>
<td rowspan="2">2</td>
</tr>
<tr><!-- empty row --></tr>
<tr><td rowspan="2">2</td></tr>
<tr><td rowspan="3">3</td></tr>
<tr><td rowspan="2">2</td></tr>
<tr><!-- empty row --></tr>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25509755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号