使用嵌套的单元格和行构建HTML表

Question

我正在努力构建以下HTML结构，我尝试过使用<div>，但我觉得使用<table>最适合这里。

div1    div2            div 3         div4
9.57%  30.85%          40.43%        19.15%
__________________________________________
|   |  CONTROL  |                  |       |
|   |___________|    DESCRIPTION   |   B   |
|   | OPTIONAL 1|                  |   A   |
| C |___________|__________________|   R   |
| O |           | UNITS |OPTIONAL 4|       |  @c_height
| D |   IMAGE   |  PER  |__________|   C   |
| E |           | CARDS |OPTIONAL 5|   O   |
|   |___________|_______|__________|   D   |
|   | OPTIONAL 2|  OPTIONAL 3      |   E   |
|___|___________|__________________|_______|
@c_width

当使用<div>时，出现了以下问题：https://jsfiddle.net/h2tea4nj/31/但是嵌套的细胞在欺骗我。

这里的想法是为PDF文件创建一个HTML模板，该模板将包含许多产品标签，以给人留下深刻印象。

如有任何帮助，我将不胜感激。非常感谢。

Answer 1

处理此问题的最佳方法是使用表。若要使用嵌套单元格，可以在表中创建表。

如下面的示例所示，使用这种方法可以达到您想要的效果。对于固定宽度，您可以简单地使用css样式

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}

<table style="width: 100%;">
<tr>
<td style="width: 9.57%;">Code</td>
<td style="width: 30.85%;">
<table>
<tr>
<td>Control</td>
</tr>
<tr>
<td>Optional 1</td>
</tr>
<tr> 
<td>Image</td>
</tr>
<tr>
<td>Optional 2</td>
</tr>
</table>
</td>

<td style="width: 40.43%;">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Units per card</td>
<td>
<table>
<tr>
<td>Optional 4</td>
</tr>
<tr>
<td>Optional 5</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Optional 3</td>
</tr>
</table>
</td>



<td style="19.15%;">Bar code</td>
</tr>
<tr></tr>
</table>