Html表,rowspan问题
我正在尝试构建一个这样的表:
这是我的解决方案:
<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中有什么方法可以构建这样的表吗？
试试这个:
<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>
- 不是downvoter,但可能是元影响:[这是声誉偏差的情况吗？](http://meta.stackoverflow.com/questions/269925/is-this-a-case-of-reputation-bias) (2认同)
你只有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>
这 是我所能看到的结构.
希望这可以帮助.
| 归档时间： |
|
| 查看次数： |
3343 次 |
| 最近记录： |