DIV：
<div
style="width:600pxoverflow:hidden">
<div
style="float:leftwidth:98pxheight:700pxborder:1px
solid
#000"></div>
<div
style="float:leftwidth:499pxheight:100pxborder:1px
solid
#000border-left:0px"></div>
<div
style="float:leftwidth:499pxheight:599pxborder:1px
solid
#000border-left:0pxborder-top:0px"></div>
</div>
参考代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse
}
table, tr, td, th {
border: 4px solid black
}
th, td {
width: 200px
height: 50px
text-align: center
}
</style>
</head>
<body>
<table>
<tr style="height: 100px">
<td colspan="3">
<span style="display: blockpadding: 10pxborder: 3px solid blackwidth: 500pxfont-size: 23pxmargin: autofont-weight: bold">扫码文本框</span>
</td>
<td><span style="display: blockwidth: 70pxmargin: auto">加载历史入库信息</span></td>
</tr>
<tr>
<th>产品名称</th>
<th>装箱数量</th>
<th>箱数<span style="font-size: 10px">(默认1箱)</span></th>
<th>1</th>
</tr>
<tr>
<td>A</td>
<td>100</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>100</td>
<td>1</td>
<td rowspan="4"></td>
</tr>
<tr>
<td>A</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>合计：</td>
<td>300</td>
<td>3</td>
</tr>
<tr>
<td colspan="3"><span style="display: blockpadding: 5pxborder: 3px solid blackwidth: 500pxfont-size: 20pxmargin: autofont-weight: bold">确认</span></td>
</tr>
</table>
</body>
</html>
效果如下图：
直接用table+css很简单的就写出来了。为什么一定要DIV+CSS呢。该用table还是用table啥。直接用CSS控制表格的边框线就OK了。就用border-left,border-right,border-top,border-bottom.就性了。border-left:1px#ccc
solid
