任何人都可以指导我创建这样的表格。这必须动态绘制。
第一个单元格有java中的Map的键，它有一个数据列表。
我们可以在 td 中使用 tr 来获取三行吗？
问问题
1063 次
3 回答
3
请看下面的代码：
<table>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
于 2012-12-14T14:12:51.007 回答
1
您应该在and元素上使用colspanandrowspan属性。tdth
看看这个小提琴
于 2012-12-14T14:08:16.217 回答
1
您可以通过嵌入两个表格和 CSS 来获得所需表格的另一种方法
CSS
.t1{
border:2px solid gray;
border-right: none;
width:100%;
height:400px;
padding:0;
}
.t2{
width:100%;
height:100%;
}
.t2 td{
width:33%;
color:red;
border-right:1px solid black;
border-bottom:1px solid black;
}
.t2 .last td{
border-bottom:none;
}
.c1{
width: 25%;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
height:50%;
}
.c2{
width:75%;
border-left: 2px solid gray;
border-bottom: 2px solid gray;
height:50%;
}
HTML
<table class="t1">
<tr>
<td class="c1"> 2</td>
<td class="c2">
<table class="t2">
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="last">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="c1"> 3</td>
<td class="c2">
<table class="t2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="last">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
以下是jsfiddle演示：http: //jsfiddle.net/saidbakr/5ByVd/1/
于 2012-12-14T14:47:57.113 回答