多表格

Question

任何人都可以指导我创建这样的表格。这必须动态绘制。

第一个单元格在java中有Map的键，它有一个数据列表。

我们可以在td中使用tr来获取三行吗？

Answer 1

请参阅以下代码：

<table>
    <tr>
        <td rowspan="3">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="3">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

Answer 2

您应该使用colspan和rowspan元素上的td和th属性。

看看这个Fiddle

Answer 3

通过嵌入两个表和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">&nbsp;2</td>
    <td class="c2">
     <table class="t2">
         <tr>
             <td>&nbsp;1</td>
             <td>&nbsp;2</td>
             <td>&nbsp;3</td>         
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>         
         </tr>
         <tr class="last">
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>         
         </tr>
      </table>
    </td>
</tr>
<tr>
<td class="c1">&nbsp;3</td>
    <td class="c2">
    <table class="t2">
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>         
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>         
         </tr>
         <tr class="last">
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>         
         </tr>
      </table>
    </td>
</tr>
</table>​

以下是jsfiddle演示：http://jsfiddle.net/saidbakr/5ByVd/1/